Advanced Vue Inertia Project

.prettierrc.yaml

arrowParens: "avoid"
bracketSameLine: false
printWidth: 120
semi: false
singleQuote: true
tabWidth: 4
trailingComma: "all"
plugins:
  - prettier-plugin-tailwindcss

dependencies.md

Composer Dependencies

composer require based/momentum-lock based/momentum-trail spatie/laravel-data spatie/laravel-typescript-transformer

Composer Dev Dependencies

composer require -dev spatie/laravel-ray

NPM Dependencies

yarn add momentum-lock momentum-trail class-variance-authority @fortawesome/fontawesome-svg-core @fortawesome/pro-duotone-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-thin-svg-icons @fortawesome/vue-fontawesome @headlessui/vue unplugin-auto-import unplugin-vue-components

NPM Dev Dependencies

yarn add -D @fortawesome/fontawesome-common-types @tailwindcss/typography prettier prettier-plugin-tailwindcss vitest

postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

tailwind.config.ts

import defaultTheme from 'tailwindcss/defaultTheme'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: 'selector',

    plugins: [
        forms({
            strategy: 'class',
        }),
        typography,
    ],
}

vite.config.ts

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import { watch } from 'vite-plugin-watch'
import autoimport from 'unplugin-auto-import/vite'
import components from 'unplugin-vue-components/vite'
import path from 'path'

export default defineConfig({
    resolve: {
        alias: {
            '@': '/resources',
            '@layouts': '/resources/views/Layouts',
        },
    },
    plugins: [
        laravel({
            input: 'resources/scripts/app.ts',
            ssr: 'resources/scripts/ssr.ts',
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
            script: {
                defineModel: true,
                propsDestructure: true,
            },
        }),
        watch({
            pattern: 'app/{Data,Enums,Pages}/**/*.php',
            command: 'php artisan typescript:transform -q',
        }),
        watch({
            pattern: 'routes/**/*.php',
            command: 'php artisan trail:generate',
        }),
        watch({
            pattern: 'resources/scripts/types/generated.d.ts',
            command: 'yarn format --log-level=silent',
        }),
        autoimport({
            vueTemplate: true,
            dts: 'resources/scripts/types/auto-imports.d.ts',
            dirs: ['resources/scripts/composables', 'resources/scripts/libs'],
            imports: [
                'vue',
                { 'momentum-lock': ['can'] },
                { '@inertiajs/vue3': ['router', 'useForm', 'usePage'] },
                { 'momentum-trail': ['route', 'current'] },
            ],
        }),
        components({
            dirs: ['resources/views/Components', 'resources/views/Layouts'],
            dts: 'resources/scripts/types/components.d.ts',
            directoryAsNamespace: true,
            collapseSamePrefixes: true,
            resolvers: [
                (name: string) => {
                    const components = ['Link', 'Head']

                    if (components.includes(name)) {
                        return { name, from: '@inertiajs/vue3' }
                    }
                },
            ],
        }),
    ],
})

vitest.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig({
    test: {
        globals: true,
    },
})