Vue 3 setup recipes
This is in the works! Would you like to help flesh it out? Let's do it!
What is the situation?
Devtools extension is great. You use it to work on your site locally. When you push up your production build to the server, people aren’t going to be able to inspect it with the Devtools because it’s not in development mode. You probably don’t want strangers digging into your site. But if you happen to be going to a web development school, then – you probably do.
What to do
Set up a build:dev script in your package.json
"build:dev": "vite build --mode development",
npm run build:dev
Basic idea ^
Then we made a deploy:dev script to bundle that up
"deploy:dev": "vite build --mode development && cp dist/index.html dist/200.html && surge dist",
Ours is long! but do what you’ve gotta do based on your setup.
--mode
is the parameter and development
is the argument
This will build it in a development style instead of production and then deploy the files.
But! That’s not enough.
You also need a dev-specific dotenv file in your root.
Give it a shot. Did it work?
(also – sometimes Vue Devtools is finicky) (so, close chrome and refresh and stuff)
NODE_ENV=development
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
// treat all tags with a dash as custom elements
isCustomElement: (tag) => tag.includes('-')
}
}
})
]
}
https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslint from '@rollup/plugin-eslint';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({options),
{
...eslint({
include: 'src/**/*.+(js)',
}),
enforce: 'pre',
apply: 'build',
},
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
});
{
"trailingComma": "all",
"useTabs": true,
"tabWidth": 3,
"semi": true,
"singleQuote": true,
"printWidth": 120,
"bracketSpacing": true,
"vueIndentScriptAndStyle": true
}