Blog

npm create vite@latest zapnet-vue-v4 --template vue-ts
vue
Typescript
rolldown no
npm yes

git init
git add .
git commit -m "master"

npm install tailwindcss @tailwindcss/vite

/* Replace everything in src/style.css with the following: */
@import "tailwindcss";

// Edit tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

// Edit tsconfig.app.json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "types": ["vite/client"],

    // tambahkan =============
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },

    // =======================

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

npm install -D @types/node

// vite.config.ts

import path from "node:path";
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

npx shadcn-vue@latest init

npx shadcn-vue@latest add login-01