Vue 3, Nuxt 3, Pinia, TailwindCSS Setup

Vue 3, Nuxt 3, Pinia, TailwindCSS V3

---------------------------------
Create Nuxt 3 App

npx nuxi init nuxt3app
cd nuxt3app
yarn install

----------------------------------------
Install Pinia Store

yarn add pinia
yarn add @pinia/nuxt

// nuxt.config.js
import { defineNuxtConfig } from 'nuxt'


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


// mkdir store
// touch store/counter.js
import { acceptHMRUpdate, defineStore } from 'pinia'

const delay = (t) => new Promise((r) => setTimeout(r, t))

export const useCounter = defineStore('counter', {
    state: () => ({
        n: 2,
        incrementedTimes: 0,
        decrementedTimes: 0,
        numbers: [] ,
    }),

    getters: {
        double: (state) => state.n * 2,
    },

    actions: {
        increment(amount = 1) {
            this.incrementedTimes++
            this.n += amount
        },

        changeMe() {
            console.log('change me to test HMR')
        },

        async fail() {
            const n = this.n
            await delay(1000)
            this.numbers.push(n)
            await delay(1000)
            if (this.n !== n) {
                throw new Error('Someone changed n!')
            }

            return n
        },

        async decrementToZero(interval = 300) {
            if (this.n <= 0) return

            while (this.n > 0) {
                this.$patch((state) => {
                    state.n--
                    state.decrementedTimes++
                })
                await delay(interval)
            }
        },
    },
})

if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useCounter, import.meta.hot))
}

// mkdir pages
// touch pages/index.vue
// rm app.vue
<template>
  <p class="p-20">{{ counter.$state }}</p>
</template>
<script setup>
import { useCounter } from "~/store/counter";
const counter = useCounter()
</script>


----------------------------------------
Install TailwindCSS 

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


// tailwind.config.js
module.exports = {
    mode: "jit",
    content: [
        "./components/*.{vue,js}",
        "./components/**/*.{vue,js}",
        "./layouts/**/*.vue",
        "./pages/*.vue",
        "./pages/**/*.vue",
        "./plugins/**/*.{js,ts}",
        "./assets/*.css",
        "./assets/*/*.css",
        "./assets/**/*.css",
        "app.vue",
        'error.vue'
    ],
    media: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

// mkdir -p "assets/css"
// touch assets/css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// nuxt.config.ts
import {defineNuxtConfig} from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    modules: ['@pinia/nuxt'],
    css: ["~/assets/css/tailwind.css"],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            },
        },
    },
})


// add favicon icon
mkdir public
touch public/favicon.ico