Blog Details

admin 21 April, 2026 Tutorial

Setup Vue js projek menggunakan vite versi 8 dan Tailwind Css (Fix Axios issues)Vulnerability

Setup Project Vue JS 

Prasyarat

• Node.js v20.19.0 atau >=22.12.0
• npm v10+

1. Buat Project Baru

bash
npm create vue@latest

Saat prompt muncul, pilih konfigurasi berikut:

text
Project name:            SiPanji
TypeScript:              No
JSX Support:             No
Router (SPA):            Yes
Pinia:                   Yes
Vitest:                  No
End-to-End Testing:      No
Linter (error prev.):    Yes   ← ini ESLint
Prettier:                Yes

Experimental features:   (kosongkan, langsung Enter)
  ◻ Replace Prettier with Oxfmt
  ◻ Vue 3.6 (beta)bash
cd SiPanji
npm install

2. Install Dependencies

bash
npm install axios@1.15.0 apexcharts vue3-apexcharts jspdf jspdf-autotable material-design-icons-iconfont vee-validate yup

⚠️ Axios Security Notes (2026):

• Versi 1.14.1 dan 0.30.4 mengandung malware RAT (supply chain attack, 31 Mar 2026) — jangan pernah install
• Versi < 1.15.0 memiliki CVE SSRF dan Header Injection
• Gunakan 1.15.0 tanpa caret di package.json: "axios": "1.15.0"

3. Install Tailwind CSS

bash
npm install -D tailwindcss@^4.1.0 @tailwindcss/vite@^4.1.0

⚠️ Jangan gunakan @next. Project ini menggunakan Vite 8 — pastikan @tailwindcss/vite versi 4.1.x ke atas (versi 4.0.0 hanya support Vite 5/6).

4. Edit vite.config.js

js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [vue(), vueDevTools(), tailwindcss()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

5. Edit src/assets/main.css

Di Tailwind v4, tidak ada tailwind.config.js. Semua konfigurasi tema menggunakan @theme {} langsung di CSS.

css
@import "tailwindcss";

@theme {
  /* Primary — Hijau Tua */
  --color-primary:     #1B5E20;
  --color-primary-50:  #E8F5E9;
  --color-primary-100: #C8E6C9;
  --color-primary-200: #A5D6A7;
  --color-primary-300: #81C784;
  --color-primary-400: #66BB6A;
  --color-primary-500: #4CAF50;
  --color-primary-600: #43A047;
  --color-primary-700: #388E3C;
  --color-primary-800: #2E7D32;
  --color-primary-900: #1B5E20;

  /* Secondary — Hijau Muda */
  --color-secondary:     #4CAF50;
  --color-secondary-50:  #F1F8E9;
  --color-secondary-100: #DCEDC8;
  --color-secondary-200: #C5E1A5;
  --color-secondary-300: #AED581;
  --color-secondary-400: #9CCC65;
  --color-secondary-500: #4CAF50;
  --color-secondary-600: #7CB342;
  --color-secondary-700: #689F38;
  --color-secondary-800: #558B2F;
  --color-secondary-900: #33691E;

  /* Accent — Emas */
  --color-accent:     #D4AF37;
  --color-accent-50:  #FFFDE7;
  --color-accent-100: #FFF9C4;
  --color-accent-200: #FFF59D;
  --color-accent-300: #FFF176;
  --color-accent-400: #FFEE58;
  --color-accent-500: #D4AF37;
  --color-accent-600: #F9A825;
  --color-accent-700: #F57F17;
  --color-accent-800: #E65100;
  --color-accent-900: #BF360C;

  /* Background & Surface */
  --color-background: #F9F9F9;
  --color-surface:    #FFFFFF;
  --color-surface-2:  #F3F4F6;

  /* Text */
  --color-text:         #212121;
  --color-text-muted:   #616161;
  --color-text-faint:   #9E9E9E;
  --color-text-inverse: #FFFFFF;

  /* Semantic */
  --color-success: #2E7D32;
  --color-warning: #F57F17;
  --color-error:   #C62828;
  --color-info:    #01579B;
}

@layer base {
  body {
    background-color: var(--color-background);
    color: var(--color-text);
  }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: var(--color-surface-2); }
  ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); }
}

6. Edit src/main.js

js
import './assets/main.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import VueApexCharts from 'vue3-apexcharts'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(VueApexCharts)
app.component('apex-chart', VueApexCharts) // multi-word agar tidak warning ESLint
app.use(createPinia())
app.use(router)

app.mount('#app')

7. Referensi package.json

json
{
  "dependencies": {
    "apexcharts": "^5.x.x",
    "axios": "1.15.0",
    "jspdf": "^4.x.x",
    "jspdf-autotable": "^5.x.x",
    "material-design-icons-iconfont": "^6.7.0",
    "pinia": "^3.x.x",
    "vee-validate": "^4.x.x",
    "vue": "^3.5.x",
    "vue-router": "^5.x.x",
    "vue3-apexcharts": "^1.x.x",
    "yup": "^1.x.x"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.1.x",
    "@vitejs/plugin-vue": "^6.x.x",
    "eslint": "^10.x.x",
    "prettier": "^3.x.x",
    "tailwindcss": "^4.1.x",
    "vite": "^8.x.x",
    "vite-plugin-vue-devtools": "^8.x.x"
  }
}