So I've set my project up using sencha cmd. I have the following dir
app
-model
-view
-store
-controller
If I create custom plugins or feature where should I place them under views, or some other location?
I have the following directory structure:
app
controller
model
plugins
store
view
You then include each plugin in your header:
<script type="text/javascript" src="app/plugins/SomePlugin.js"></script>
There is some sense though to have the following folder structure as plugins are component plugins thus are part of the view layer:
app
view
plugins
Related
I recently started learning NuxtJs and create a nuxt app using the nuxt3 template. The code i used to generate the starter project is
npx nuxi init nuxt-app
However the the terminal shows that the app has been created and the dev server also starts displaying the Nuxt3 welcome page. But when i load the directory in vs code the folders like pages,store and components are not visible as seen in the screenshot below .
You are importing <NuxtWelcome /> component from node_modules folder. Delete it and replace with <NuxtPages/>. Create your own components in folder pages. Nuxt 3 imports components by itself, so you don't see them in <script> tag. <NuxtPages /> will do the magic with components in page folder. For example, Index.vue component you will see in / home page and About.vue in /about.
This behavior is a year old already: Some of the directories are missing when I'm trying to create a new Nuxt js project
The idea is to have something minimal where you could then add all the needed directories.
Benefit being that if you don't use any pages, the final bundle will be smaller (no need to being in Vue router for example). Same for the store (no need to import Vuex/Pinia), server part etc...
It's less of a "you have everything from the start" and more of a "pick what you like the most"!
Using OroCommerce v4.1.8 (latest stable version).
I have created my custom theme (extended from "default" theme) which renders correctly (all css is loaded and applied as defined), but for my custom JS file that does not appear to be included in the page. Below is my \Resources\views\layouts\mytheme\config\jsmodules.yml file:
shim:
jquery:
expose:
- $
- jQuery
magnificPopup:
imports:
- jQuery=jquery
owlCarousel:
imports:
- jQuery=jquery
exports: owlCarousel
aliases:
magnificPopup$: mytheme/js/magnific-popup.min
owlCarousel$: mytheme/js/owl.carousel.min
my-main$: mytheme/js/main
dynamic-imports:
mytheme:
- magnificPopup
- owlCarousel
- my-main
On the webserver, I can see a compiled mytheme.js file getting created under /var/www/oroapp/public/layout-build/mytheme/chunk folder, but looking into the HTML for the home page, there is no line/reference to load this file.
Please advise what am I missing or how to troubleshoot this?
OroCommerce uses Webpack to build JS dependencies. By default, all the configured JavaScript dependencies files are combined to the single file, e.g.:
<script src="/layout-build/mytheme/app.js"></script>
Where mytheme is your theme name.
To use one of the above dependencies in your ES6 module, you have to require it manually with the import statement or using the require function.
For more details, see the official documentation about JavaScript Modularity in the OroCommerce Application.
I am trying to create a plugin that utilizes components from another Vuejs plugin (Vuetify). Basically, I have some common components I want to share across multiple applications with our company.
I thought it would just be a matter of:
Create a github repo for the shared components
Author the plugin
Reference the repo in consuming apps via npm install
Here is the gist of the plugin:
// src/index.js <-- package.json/main is set to "src"
import MyComponent from "./MyComponent.vue";
import * as api from "./api";
export default function install(Vue) {
Vue.component("myComponent", MyComponent );
Vue.prototype.$myApi = api;
}
At the moment, the behavior I'm seeing is:
GOOD
plugin install function is being executed
functions from api attached to Vue.prototype are available in app components
my-component is available in the app and renders markup
BAD
$myApi and Vuetify components are not available in an application instance of of my-component
If I copy the same files into the app and change my import, all works as expected. So, I now wonder if I'm missing something regarding sharing code via external modules.
I've tried these alternatives with the same issue:
use npm link to link the plugin module to the app
manually, use mklink (Windows sym link) to link plugin module to node_modules in the app folder
use a long relative path reference to the plugin module: import MyPlugin from "../../../my-plugin"
I've put this issue off for a while, but for anyone wondering, the issue is with using Single File Components and webpack not compiling those in external modules.
The 2 options I have are:
Don't use Single File Components. I.e.: Just use .js instead of .vue. I've seen some libs like Vuetify.js take this approach
Compile the .vue files in the library module and include them in the source such as ./dist folder.
I would like to know how to change the default index.html file. I have created a classic project (for mobile web). In that I have created a .css file which includes my custom styles. Now I would like to include this file in index.html, so that those styles will apply on my application. But haven't seen the index.html file. After build, I am able to see this file in build folder. May I know how to update the index.html file?
Thanks in Advance,
Swathi.
Appcelerator uses XML for views, TSS for styling, and JS for controllers. Then Titanium compiles your source code into the native API (HTML for mobile web). Because you can also compile for iOS, Android, and Windows, your output is converted appropriately to your build directory. When you create a new Alloy project, you will find the default index.xml, index.tss, and index.js in the app views, styles, and controllers directories respectively. So to control index.html, edit these 3 index.* files.
I am new to Sencha Touch and the Sencha world. During sencha app build in development, I want to specity my server absolute url in the generated bootstrap.js so that the Sencha loader loads the widgets using the correct url.
How can I do this?
Any pointer would be appreciated.
You want to utilize paths configuration. This can and should be done in your application definition (app.js) by adding an array of paths. Here you can map a specific/custom class namespace to a URL path.
You will also want to add this to "classpath" in app.json.