How to setup VueJS 3 with Vite, Tailwind CSS and ESLint/Prettier

(There’s a new version of this tutorial here)

If you haven’t heard about vite already, it’s a new developer tool to build your JavaScript projects. We’re going to be using yarn but you’re free to use npm. Let’s start by opening a terminal and typing:

yarn create vite

And you can start the development server with:

yarn
yarn dev

The first line downloads all the JavaScript dependencies and the second one starts it, but wasn’t that fast? If you’ve been using vue-cli or just plain old Webpack this is way faster. This has to do with how Vite uses the modern browser capabilities to use your code as-is, without having to transform or package it. You can read more about it here.

The console is giving us feedback on what it’s doing and a line of feedback is:

warning package.json: No license field

Let’s address that by opening the project in your favorite text editor (mine happens to be Visual Studio Code) and opening the package.json file in the root folder of the project.

{
  "name": "testing",
  "version": "0.0.0",
  "license": "MIT",
  "author": {
    "name": "J. David Mendoza",
    "email": "jdmendozar@gmail.com",
    "url": "https://dmendoza.dev"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.14"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "vite": "^2.6.3"
  }
}

Notice how I changed the version and added a license and my information for the author.

If you still have your dev server running, please stop it by making sure the focus is on the terminal and pressing Ctrl+C to stop the process. You can run it again to make sure the warning is not showing anymore.

Let’s add TailwindCSS. I’m going to be following tailwind’s tutorial but with yarn.

With the dev server stopped (Ctrl+C) in the terminal run these instructions:

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
yarn tailwindcss init -p

We modify the tailwind.config.js to look like this:

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

We create the src/index.css file:

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

And add it to the src/main.js file:

import { createApp } from 'vue'
import App from './App.vue'
import "./index.css"
createApp(App).mount('#app')

Now that we have TailwindCSS, let’s quickly test it by modifying the src/App.vue file:

<div class="container mx-auto min-h-screen flex flex-col justify-center items-center p-2">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + Vite" />
</div>

And seeing it in the browser by running the dev server with:

yarn dev

It should look something like:

On to the next task. ESLint is a tool that finds and fixes problems in our JavaScript and Prettier is an opinionated list of rules. Let’s configure them for our project:

yarn add -D eslint \
    eslint-config-prettier \
    eslint-plugin-prettier \
    eslint-plugin-vue \
    prettier

With these instructions, we’re adding eslint, prettier, and the vue integration libraries. Now we need to configure them:

❯ yarn eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No
✔ Where does your code run? · browser, node
✔ How would you like to define a style for your project? · prompt
✔ What format do you want your config file to be in? · JavaScript
✔ What style of indentation do you use? · 4
✔ What quotes do you use for strings? · single
✔ What line endings do you use? · unix
✔ Do you require semicolons? · No

This creates the .eslintrc.js file, but it also uses npm to add the eslint-plugin-vue we had already added, which in turn is going to create a package-lock.json and make our yarn complain about running npm and yarn side by side. So let’s remove it:

rm -rf package-lock.json

Next we update the .eslintrc.js file to look like this:

module.exports = {
    env: {
        browser: true,
        node: true,
        es2021: true
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
        'prettier'
    ],
    plugins: ['vue', 'prettier'],
    rules: {
        'prettier/prettier': ['error']
    }
}

Now we need to add the .prettierrc.js file right next to the .eslintrc.js file we just created:

module.exports = {
    semi: false,
    singleQuote: true,
    tabWidth: 4,
    trailingComma: 'none'
}

With these files in place you can format your code with the next instruction in the terminal:

yarn eslint --ext .js --ext .vue . --fix

Cool! Right? Let’s add a tool that will do the same thing but for CSS. It’s called StyleLint and we add it by running this next instruction:

yarn add -D stylelint stylelint-config-standard

And we configure it by adding the .stylelint.config.js file right there on the root folder:

module.exports = {
    extends: ['stylelint-config-standard'],
    rules: {
        indentation: 4,
        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: [
                    'tailwind',
                    'apply',
                    'variants',
                    'responsive',
                    'screen'
                ]
            }
        ],
        'declaration-block-trailing-semicolon': null,
        'no-descending-specificity': null
    }
}

This configuration file already has the TailwindCSS rules, so if you open the src/index.css again the squiggly lines under the @tailwind instructions should be gone if you’re using VS Code. If it’s not gone you probably need to install the StyleLint Plugin into VS Code.

Wouldn’t be nice to have the text editor format your files on save? Well if you’re using VS Code you can by having the following extensions: ESLint, Prettier, TailwindCSS & StyleLint. And creating the file .vscode/settings.json:

{
  "eslint.validate": ["vue", "javascript"],
  "eslint.packageManager": "yarn",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "css.validate": false,
  "tailwindCSS.emmetCompletions": true
}

Now, whenever you save a vue file or a JavaScript file or a CSS file it should automatically be formatted.