Project Set-up: Vite + Vue 3 + Linter + Tailwind CSS

Building a Typescript Vue 3 project with Vite alongside useful linting tools and Tailwind CSS.

Introduction

Vite a is a build tool developed by Evan You, the creator of Vue. Vite’s objective is to improve the frontend development experience by providing lightning-fast hot module reloading (HMR) and optimizing the bundling process with Rollup.

Project Goal

This guide is walk you through the set-up in 3parts: the Vue project setup, the linter setup, and add Tailwind CSS. I am using VS Code to set up the project so I will be adding some helpful VS Code extensions and configurations.

• Vue 3 + TypeScript + Vite
• ESLint + Prettier
• Tailwind CSS + Stylelint

If you’d like to skip everything and just copy the project, feel free to clone from this repository. Note that you would still have to install the necessary VS Code extensions.

Vue 3 + TypeScript + Vite

Pre-requisite

// skip this if you've installed vue
npm install vue

Set-up

First, initialize your vite application according to vite’s official guide:

# npm 6.x
npm init @vitejs/app my-vue-app --template vue-ts

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-vue-app -- --template vue-ts

# yarn
yarn create @vitejs/app my-vue-app --template vue-ts
cd my-vue-app
npm install

my-vue-app will be the name of your project so change it to whichever name you’d prefer. Since, we want to set it up with Typescript, --template vue-ts flag is added. Go ahead to install your dependencies and open your project directory. You should see the created file structure like so.

/public
/src
.gitignore
index.html
package.json
README.md
tsconfig.json
vite.config.ts

Optional: Go to your .gitignorefile and add the following to prevent unnecessary files from getting committed via git.

.DS_Store
*.local
*.swp
*~
dist
dist-ssr
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Dependency directories
node_modules
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.local
.env.*.local
.env.staging
.env.production

If you are using VS Code, you may encounter the ts(2307) error if you look into /src/main.ts . Fret not, you can fix them by creating the type declaration file. First, go to /src/shims-vue.d.ts and change it to the following

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent<
    Record<string, unknown>,
    Record<string, unknown>,
    unknown
  >;
  export default component;
}

Then, go to /tsconfig.json and paste this config

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

Now, you shouldn’t have issues with ts(2307) on VS Code.

You will notice that you cannot import using the @/views/to/your/component convention, just like what we’re used to with the vue-cli. So, let’s add the path alias by adding the following in your vite.config.ts file.

import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
});

With that setup, you should be able to import using the “@/” convention!

ESLint + Prettier

Ah yes, just with someone who has OCD with code organizations (me), linting is certainly a great tool to utilize! Also, to prevent your coworkers from yelling at you for bad formatting.

First, we have to install eslint, eslint plugins and prettier to dev.

// eslint
npm install -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript
// prettier
npm install -D prettier eslint-plugin-prettier @vue/eslint-config-prettier

Add .eslintrc.js file to your project directory with the following configurations. I decided to use on a couple of standard linting rules but if you prefer to customize it yourself, you can exclude everything in the rules object.

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  parserOptions: {
    ecmaVersion: 2021,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'max-len': ['error', { code: 120, ignoreUrls: true, ignoreStrings: true }],
    'no-underscore-dangle': [2, { allow: ['_id'] }],
    'no-plusplus': 'off',
    'class-methods-use-this': 'off',
    'no-empty': ['error', { allowEmptyCatch: true }],
    'lines-between-class-members': 'off',
    'no-unused-expressions': ['error', { allowShortCircuit: true }],
    'import/prefer-default-export': 'off',
  },
};

Next, let’s add the .prettierrc configurations on your project’s root directory.

{
  "singleQuote": true,
  "semi": true,
  "vueIndentScriptAndStyle": true,
  "trailingComma": "all"
}

On VS Code, you can also do automatic formatting by installing the ESLint and Prettier extension. Then add the following to your .vscode/settings.json on your project’s root directory.

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

VS Code may not automatically use the prettier and eslint settings. If that’s the case, simply close VS Code and reopen your project and it should work.

Viola! Your code will be formatted whenever you save your file now 😀

Tailwind CSS + Stylelint

Most of us can agree with Tailwind is great for quickly building good-looking components so lets proceed adding it into our Vue project! From the official tailwind, lets start with installing and initializing the tailwind packages.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
// create config files
npx tailwindcss init -p

Since tailwind imports a large set of styles we can utilize, we should tree-shake any unused styles when building for production. All we have to do is to add the following configuration to tailwind.config.js

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

Then, create a new file on /src/index.css and the following to inject tailwind styles.

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

Tailwind prefers designing components that are responsive to different device sizes so, optionally, we can enforce styling by using stylelint.

npm install -D stylelint stylelint-config-recommended stylelint-config-standard

And finally, use the following configurations

{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-standard"
  ],
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "tailwind",
        "layer"
      ]
    }],
    "block-no-empty": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

That’s it! You’ve gotten your project set-up for a great development experience! 🚀