Nuxt 3 with Eslint and Tailwindcss

Look at the nuxt 3 documentation to learn more.

Features

• [x] 🌊 Tailwindcss
• [x] 🍍 State & Store Management (Pinia)
• [x] 📦 Vue Composition Collection (Vueuse)
• [x] 🥸 Mocking Service Worker (MSW)
• [x] 📱 Mobile Detect module @nuxtjs/device
• [x] ✨ Eslint & lint-staged
• [x] 🐕 Husky & cz
• [x] 🔗 Axios v1 setup complete in NuxtApp

Setup

Make sure to install the dependencies:

# yarn
yarn install

# pnpm (Not recommended right now)
# Even with `--shamefully-hoist`, it still not work properly
pnpm install

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

When you are testing and adding these modules in your project, remember to run yarn dev during your testing process. Some of auto-import feature need to be generated automatically into .nuxt.

Normally, nuxt will generate app.vue to be the entry point of your app. However, if you create pages directory, app.vue will be useless. Therefore, our entry page is pages/index.vue.

Eslint Setup with Typescript

yarn add -D @nuxtjs/eslint-config-typescript eslint

.eslintrc configuration

{
  "extends": ["@nuxtjs/eslint-config-typescript"]
}

Optional: We use eslint to format the code officially. There are some settings that you may want to disable.

1. On macOS - Code > Preferences > Settings
2. Search Prettier:Require Config uncheck it in your workspace

{
  "prettier.requireConfig": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Tailwindcss Setup

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

yarn add -D @nuxtjs/tailwindcss

Optional: Create tailwind.css file in assets/css folder

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

nuxt.config.ts configuration

export default defineNuxtConfig({
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config',
    // exposeConfig: false,
    // config: {},
    // injectPosition: 0,
    // viewer: true,
  },
  modules: ['@nuxtjs/tailwindcss'],
})

Create tailwind.config.ts and its configuration

import type { Config } from 'tailwindcss'
// import defaultTheme from 'tailwindcss/defaultTheme'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        primary: '#00FF00',
        // primary: defaultTheme.colors.green
      },
    },
  },
}

Official setting of defaultTheme.colors.green for green is not working

Pinia Setup 🍍

yarn add @pinia/nuxt

nuxt.config.ts configuration

// nuxt.config.ts
export default defineNuxtConfig({
  // make user stores directory to be able to auto-import without import anything
  imports: {
    dirs: ['stores'],
  },
  modules: [
    [
      '@pinia/nuxt',
      {
        autoImports: ['defineStore', 'acceptHMRUpdate'],
      },
    ],
  ],
})

MSW Setup

Simply follow the instruction and put the starting point into plugins

yarn add -D msw

// msw.client.ts
import { worker } from '@/mocks/browser'

export default defineNuxtPlugin(() => {
  if (process.dev) {
    worker.start({
      onUnhandledRequest: 'bypass',
    })
  }
})

Axios Setup

You have to set interceptors for each purpose of api in apis directory. Then all these file will get imported into plugins/apis.ts.

yarn add -D axios

Use it as a plugin. You can use it like below.

const { $api } = useNuxtApp()
const handleClick = async () => {
  const data = await $api.mountain.getMountains()
}

Device Setup

Previous version is using custom plugin to find out user-agent. However, @nuxtjs/device had already finished the version 3 of the module. Therefore, we use it with pleasure.

yarn add -D @nuxtjs/device

export default defineNuxtConfig({
  modules: ['@nuxtjs/device'],
})

Composable

<script setup>
  const { isMobile } = useDevice()
</script>

Switch a view (Cannot be recognized by ts(2339))

Property '$device' does not exist

It works fine with the function of it.

<div>
  <div v-if="$device.isDesktop">Desktop</div>
  <div v-else>Mobile</div>
</div>

Official example

<script lang="ts" setup>
  const device = useDevice()
</script>

<template>
  <div>
    <div v-if="device.isMobile">Mobile</div>
    <div v-else>Not Mobile</div>
  </div>
</template>

Change a layout dynamically (index.vue)

<script lang="ts" setup>
  const device = useDevice()
  definePageMeta({
    layout: false,
  })
</script>

<template>
  <div>
    <NuxtLayout :name="device.isMobile ? 'mobile':'default'">
      <h1>Home Page</h1>
      The rest of the page
    </NuxtLayout>
  </div>
</template>

VueUse Setup

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

yarn add -D @vueuse/nuxt @vueuse/core

nuxt.config.ts configuration

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