kurt-liao / nuxt3-eslint-starter

A Nuxt 3 starter template with working Eslint.

Nuxt 3 with Eslint and Tailwindcss

Look at the nuxt 3 documentation to learn more.

Features

• 🌊 Tailwindcss v3
• 🍍 State & Store Management (Pinia)
• 📦 Vue Composition Collection (Vueuse)
• 🥸 Mocking Service Worker (MSW)
• 📱 Mobile Detect Plugin
• ✨ Eslint & Prettier
• 🐕 Husky & Commitlint
• 🔗 Axios setup complete in NuxtApp

Setup

Make sure to install the dependencies:

# yarn
yarn install

# pnpm
pnpm install --shamefully-hoist

Development Server

Start the development server on http://localhost:3000

yarn dev

Production

Build the application for production:

yarn build

Locally preview production build:

yarn preview

Checkout the deployment documentation for more information.

Setup Tutorials for other libraries

Eslint Setup

yarn add -D @nuxtjs/eslint-config-typescript eslint@latest eslint-plugin-nuxt@latest eslint-config-prettier eslint-plugin-prettier

Nuxt 3 built-in typescript is still cannot be detected by eslint, So...

yarn add -D typescript

eslintrc.json configuration

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "@nuxtjs/eslint-config-typescript",
    "plugin:nuxt/recommended",
    "plugin:prettier/recommended"
  ]
}

Tailwindcss Setup

Recommended extension Tailwind CSS IntelliSense and PostCSS Language Support. You can see the recommended list in extension.json

yarn add -D tailwindcss
npx tailwindcss init

Create tailwind.css file in assets/css folder

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

tailwind.config.js configuration

module.exports = {
  content: ['./components/**/*.vue', './layouts/**/*.vue', './pages/**/*.vue'],
  theme: {
    extend: {},
  },
  plugins: [],
}

nuxt.config.ts configuration

export default defineNuxtConfig({
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
  css: ['~/assets/css/tailwind.css'],
})

Pinia Setup 🍍

yarn add -D pinia @pinia/nuxt

nuxt.config.ts configuration

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

tsconfig.json for typescript support

{
  "compilerOptions": {
    "types": [
      // https://pinia.vuejs.org/
      "@pinia/nuxt"
    ]
  }
}

MSW Setup

Simply follow the instruction and put the starting point into plugins

yarn add -D msw

Axios Setup

yarn add -D axios

api folder structure is below

.
└── api
    ├── index.ts
    ├── user.ts
    ├── search.ts
    └── layout.modify.ts

• index.ts is the root file to access all apis
• Only mocks/handlers.ts can directly access individual api file to get the urls
• Please call layout.modify.ts by using useAsync. layout.modify.ts is the modification of current site layout from backend.
• And put api into useNuxtApp to be the context from plugins

Device Plugin Setup

This Plugin is alive because @nuxt/device is not working by simple installation. Therefore I refer to its plugin.js to rewrite a simple context in useNuxtApp with $isMobile. Feel free to use it.

VueUse Setup

Its composables are also auto-import to your project✨✨✨

yarn add -D @vueuse/nuxt

nuxt.config.ts configuration

export default defineNuxtConfig({
  modules: ['@vueuse/nuxt', '@pinia/nuxt'],
  vueuse: {
    ssrHandlers: true,
  },
})