Vue Project Setup

Table of contents

1. Start project directory
2. Install Tailwind CSS
   1. Remove unused styles in production builds
   2. Include Tailwind CSS
   3. WindiCSS (optional)
3. Add path alias
4. Desktop App with Electron (Optional)
5. Install ESLint and Prettier (Optional)

---

Start project directory

Details are listed here.

yarn create vite <app-name> --template vue-ts  # Init project
cd <app-name>
yarn  # Install packages
yarn dev  # Check build

---

Install Tailwind CSS

Details are listed here. But for the brief summary:

yarn add tailwindcss@latest postcss@latest autoprefixer@latest --dev
npx tailwindcss init -p

npx tailwind init -p generates two files tailwind.config.js and postcss.config.js.

Remove unused styles in production builds

In tailwind.config.js, replace the purge to following line,

purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']

Include Tailwind CSS

Create a file src/index.css. Then add the following to the file,

@tailwind base;
@tailwind components;
@tailwind utilities;

Then in src/main.js, import src/index.css.

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

WindiCSS (optional)

Possible replacement for TailwindCSS.

See installation here.

---

Add path alias

Unlike webpack, Vite does not automatically provide the @ path alias to src.

To enable this alias go to vite.config.ts and import path from 'path'.

If import path from 'path' shows a type warning: yarn add @types/node --dev.

Then add the following to defineConfig in vite.config.ts:

// vite.config.ts
import path from 'path'

export default defineConfig({
  ...,
  resolve:{
    alias: [
      {
        find: '@', replacement: path.resolve(__dirname, './src')
      }
    ]
  }
})

---

Desktop App with Electron (Optional)

Really nice detail in this blog.

Don’t forget to yarn add concurrently cross-end wait-on electron-buider --dev. They are needed to run the package.json scripts.

---

Install ESLint and Prettier (Optional)

yarn add eslint prettier eslint-plugin-vue eslint-config-prettier --dev

Then create two files .eslintrc.js and .prettierrc.js in the project root directory,

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'prettier',
  ],
  rules: {
    // override/add rules settings here, such as:
    'vue/no-unused-vars': 'error',
  },
}

// .prettierrc.js
module.exports = {
  semi: false,
  tabWidth: 2,
  useTabs: false,
  printWidth: 80,
  endOfLine: 'auto',
  singleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  arrowParens: 'always',
}