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'
...
Related
Using NPM Workspaces, I'm sharing one package (components) with others (webapp1 and webapp2). Something like this:
root
apps
webapp1
webapp2
packages
components
Everything is working well, but everything inside components, include source code in the src folder is being shared. Since components' compiled output folder is dist, I'd like to only share that folder. This is how it looks in the root node_modules:
The problem is that when I need to import in webapp1 or webapp2, my import path has to include the dist folder. Here's the intellisense that I get from VS Code:
And this is how I import in webapp1 and webapp2:
import Center from '#mycompany/components/dist/Center'
While everything works, how can I set up my NPM Workspaces so that only the contents of the dist folder is shared in its root?
I've tried NPM's files and .npmignore inside the components folder to ignore everything except for the dist folder, but that doesn't seem to work. The main property in package.json for components is also set to point to dist/index.js:
"main": "dist/index.js"
Interestingly, if I want to import dist/index.js file, I can do it without dist:
import foo from '#mycompany/components'
...however, importing anything other than dist/index.js requires dist to be included in the path.
You should treat the packages folder as a collection of dist folders in your use case.
In this scenario, you would move your packages/components/src folder somewhere else in your project and then build to packages/components instead of packages/components/dist
root
apps
webapp1
webapp2
packages
components
src
components
I have a similar setup in this tooling monorepo I created
An alternative to #nicksaroba's approach, if you don't want to restructure your project layout, you can just setup an alias:
// apps/webapp/webpack.config.js
module.exports = {
// ...
resolve: {
alias: {
"components": "#mycompany/components/dist/"
}
},
// ...
};
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.
So this is a project in Laravel with Vue+Vuetify frontend. I'm using Vue CLI. I have set Vue CLI's output directory to Laravel's public folder using vue.config.js, like this:
module.exports = {
configureWebpack: {
devtool: 'source-map'
},
devServer: {
proxy: 'http://localhost:8080/api/v1/',
},
outputDir: '../public',
indexPath: '../resources/views/index.blade.php',
}
This works. However mdi icons on the web page do not show. I understand that I need to add link tag <link href="https://cdn.jsdelivr.net/.../materialdesignicons.min.css" rel="stylesheet"> to the index file, but I don't know where do I add it. The index.blade.php is overwritten by the Build process every time.
Alternate path is to include that css file in the build process by installing npm package and adding a few lines to my main.js, but I'd rather avoid that since my output is already getting bigger.
Figured out soon after posting question. I'll post it here for my own record and for anyone else landing here.
The solution was simpler than I anticipated. Vue CLI uses contents of /public folder to generate build output. So the solution was to simply go to public/index.html and place the meta tag in there.
Note: In my case I created a Laravel project and then used Vue CLI to create a Vue project inside Laravel project folder, so my folder structure looked like this:
Laravel_Project
--app
--bootstrap
--...
--public
--Vue_CLI_Project
----src
----public
Note that there are two public folders: First one is in Laravel project's root directory, whereas the second one is inside Vue project's directory. We are talking about the second one here.
My git hooks does't get triggered. I pretty sure the reason is, because my package.json file isn't on the same level as my .git. So my .git dir structure looks something like this:
.git/...
.vscode/...
auth/...
core/...
www/package.json
www/scripts/verify-commit-msg.js
www/src/...
As you can see my package.json is nested inside my www/ folder.
Within my `package.json, my gitHooks looks as follow.
"gitHooks": {
"commit-msg": "node scripts/verify-commit-msg.js"
}
Additional Note: It works fine if my package.json is on the same level as my .git
I know 1 solution is to put my www in its own git repo. For now I don't want to do that.
I am using vue cli 3, and I know they are using yorky for the githooks tooling.
I am running a VueJS SPA app on top of a Flask webserver.
I am using Vue CLI 3 with a vue.config.js file with default values.
The resulting application is structured like this:
static/
dist/
index.html
css/
js/
app.js
file1.js
file2.js
I am using the app as a frontend for Flask and Flask is serving the static files from the static folder as per above. As such when the app.js file reference file1.js it needs to reference it as static/dist/js/file1.js. Currently it appears to be referencing it as js/file1.js.
How can I give a path prefix to Vue CLI not to put files in a specific path, but to reference files from a specific parent path no matter where they are?