Aurelia has this fantastic ViewLocator strategy. I can't figure out how to make it do the same for modules. Here's a sample /src setup:
- src/
- main.js
- app/
- app.js
- app.html
- foo/
- foo.js
- foo.html
- bar/baz/
- baz.js
- baz.html
Following this convention, I'd like to be able to load app with the name app rather than app/app, foo with foo rather than foo/foo, and baz with bar/baz rather than bar/baz/baz.
So in effect, <path>/<module>/<module> should be accessible from <path>/<module>
In Aurelia, what is the best way to set this convention?
There's a convention for this, and it's actually a general convention for node packages. First, structure your app module using an index.js entry point.
- src/
- main.js
- app/
- index.js
- app.js
- app.html
Next, in your main.js code, use the feature "app". This tells Aurelia to look for app/index.js and load it as a plugin.
main.js
export configure(aurelia) {
aurelia.use
.feature('app');
}
You can read more information about features here: Aurelia Features
Related
I want to use Snowpack for my Vue 3 app. Currently, I've initialized the Vue 3 app using the following command:
npx create-snowpack-app my-app --template #snowpack/app-template-vue
By default, Snowpack creates a directory structure like this:
public/
src/
App.vue
index.js
package.json
README.md
snowpack.config.js
I need to restructure things slightly. The reason why is I'm moving an existing app to Snowpack. My challenge is I need to move to a structure like this:
public/
pages/
App.vue
index.js
package.json
README.md
snowpack.config.js
In short: 1) rename src to pages and 2) move index.js up to the same level as package.json. When I make this change, Snowpack throws a warning that says "mounted directory does not exist". It prints out the files it's looking for, which, Snowpack is clearly still looking in the src directory. My thinking was to review the snowpack.config.js file.
I looked at the mount property in the snowpack.config.js file. I changed mount.src.url to /pages. However, that didn't work. I also tried changing the property to just /, which also didn't work.
What do I need to change to tell Snowpack to look in the current directory instead of the src directory for the index.js file?
That directory layout is possible with a mount config that specifies . as the mount point:
// snowpack.config.js
module.exports = {
mount: {
'.': {url: '/dist'}
},
}
Then the root index could import the SFC from <projectRoot>/pages/:
// <projectRoot>/index.js
import App from './pages/App.vue'
...
I created a project using Vue CLI (with typescript support), and added Vuetify with vue add vuetify
This create a file tree like this:
project
- public
- node_modules
- src
- components
- scss
variables.scss
- assets
main.ts
But, I want to change this structure to use something like Clean Architecture. So, I have
project
- public
- node_modules
- src
- application
- domain
- infrastructure
- web
- components
- assets
- scss
variables.scss
main.ts
But if I do this, vuetify-loader no longer loads my variables.scss file. Based on the documentation, it looks like it only loads the path src/scss/variables.scss
Is there a way to change the default path to src/web/scss/variables.scss?
vue-cli-plugin-vuetify appears to be hard-coded to expect that structure:
for (const ext of ['sass', 'scss']) {
const path = `${folder}/${file}.${ext}`
// If file doesn't exist in user
// project, continue to next
if (!fileExists(api, `src/${path}`)) continue
// If file exists, push it into
// the import statement
data.push(`#import '#/${path}${end}`)
}
Source
There is already an open issue in the repo to track for any change.
i am currently working in a Nuxt.js project and i'm trying the Pre Rendering option. I would like to change the format name of the files created when i launch nuxt generate... but i don't really now if this is even possible.
If my pages folder has these 2 componentes:
pages\
- page1.vue
- page2.vue
the default situation is that my dist folder will have these files after the generate command:
dist\
- page1
- index.html
- page2
- index.html
Would be possible to have this structure?:
dist\
- page1.html
- page2.html
I've tried to create my own router.js with my custom paths, using #nuxtjs/router module and it works in dev mode, but when i try to generate the static files, there are no errors... but it doesn't work. No page files in dist folder.
Perhaps i'm missing something, or perhaps it is not possible to do this, but... has anyone faced this situation?
Add generate.subFolders false in your nuxt config:
generate: {
subFolders: false
}
I am using NodeJS 10 to create number of lambdas. Many functions has shared code that included into each function, so overall structure looks like:
project/
function1/
api.js
serverless.yml
function2/
api.js
serverless.yml
function3/
api.js
serverless.yml
shared/
http/
index.js
node_modules/
intercom/
index.js
node_modules/
Each serverless.yml contains function declaration like:
functions:
test-database-connection:
package:
include:
- ../shared/http/**
- ../shared/intercom/**
- ./node_modules/**
- ./api.js
handler: api.connectivityDatabase
events:
- http:
path: /api/test/database
method: post
During development it works, also working offline well, but after packaging it becomes unusable because package changes relative paths to shared folder like:
package.zip/
shared/
http/
...
intercom/
...
api.js
Is it possible to keep same structure in package as during development? Or any other way to fix module paths that will work locally and on AWS both?
If you're using npm, I recommend creating a package.json file in shared
Then you can simply require it in the package.json files in function1 with a relative path:
"name": "function1",
"dependencies": {
"shared": "file:../shared",
...
}
Then you can remove the package logic from the serverless.yml file, and just let the package manager handle things. The Serverless Framework will resolve those packages when packaging your application for deployment.
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.