laravuel-spa

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

CLI

npm init vue@latest

✔ Project name: … llaravuel-spa
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … Yes
✔ Add Cypress for End-to-End testing? … No
✔ Add ESLint for code quality? … No

Done. Now run:

  cd llaravuel-spa
  nvm install node
  npm install
  npm run dev

Installing Tailwind

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Next, add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Copy and paste asset/css/ folder and update main.ts file with the following line:

// omitted for brevity ...
// import './assets/main.css'
import '@/assets/css/app.css'

// omitted for brevity ...

Containerizing with Docker

Copy the following files and paste them in the root folder of the project:

• docker-compose.dev.yml
• docker-compose.yml
• Dockerfile
• nginx.conf

Vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  // uncomment these lines to containerize
   //server: { 
   //  host: '0.0.0.0',
   // port: '80'
  //}, 
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  define: {
    'process.env': {
      // comment this line to containerize
      VUE_APP_API_URL: "http://localhost:8000",
      // uncomment this line to containerize
      //VUE_APP_API_URL: "http://api.laravuel.dev.com"
    }
  },
  test: {
    globals: true,
    environment: "jsdom",
  },
})

Axios

npm i axios

fontawesome

npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/[email protected]

https://www.npmjs.com/package/@fortawesome/vue-fontawesome/v/3.0.0-5

VueUse

npm i @vueuse/core

Lodash

npm i lodash

public folders

Copy the following folders and paste them in the public folder of the project:

• menu/
• images/