Vue 3 setup recipes

This is in the works! Would you like to help flesh it out? Let's do it!

Devtools on stage

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)

.env.development

NODE_ENV=development

Allow native custom-elements

vite.config.js

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

ESLint

vite.config.js

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)),
		},
	},
});

Prettier

.prettierrc.json

{
	"trailingComma": "all",
	"useTabs": true,
	"tabWidth": 3,
	"semi": true,
	"singleQuote": true,
	"printWidth": 120,
	"bracketSpacing": true,
	"vueIndentScriptAndStyle": true
}