Blog Details

admin 10 January, 2026 Tutorial

Setup Project Vue JS

1. Membuat Project Baru

npm create vue@latest

2. Pilih konfigurasi berikut saat prompt muncul:

• Project name: (nama project Anda)
• TypeScript: No 
• JSX Support: No
• Vue Router: Yes
• Pinia: Yes
• Vitest: No
• ESLint: Yes
• Prettier: Yes

npm install axios apexcharts vue3-apexcharts jspdf jspdf-autotable material-design-icons-iconfont vee-validate yup
npm install -D tailwindcss@next @tailwindcss/vite@next

3. Buat atau edit file vite.config.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'

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

4. Membuat tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#670075',
          50: '#f5e6f7',
          100: '#e6b3ed',
          200: '#d780e3',
          300: '#c84dd9',
          400: '#b81acf',
          500: '#670075',
          600: '#4d0057',
          700: '#340039',
          800: '#1a001c',
          900: '#00000e',
        },
      },
    },
  },
  plugins: [],
}

5. Buat file src/assets/main.css dan tambahkan:

@import "tailwindcss";
@layer base{
/* Custom Css */
}

6. Import file CSS ini di src/main.js:

import './assets/main.css'

Atau jika membuatuhkan main.js lengkap dengan chart, pinia, dan material design bisa copy paste kode dibawah ini:

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('apexchart', VueApexCharts)
app.use(createPinia())
app.use(router)

app.mount('#app')

7. Kurang lbeih package.json seperti ini (sesuaikan library yang dibutuhkan)

{
  "name": "your-project-name",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --cache",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "apexcharts": "^5.3.5",
    "axios": "^1.13.1",
    "jspdf": "^4.0.0",
    "jspdf-autotable": "^5.0.2",
    "material-design-icons-iconfont": "^6.7.0",
    "pinia": "^3.0.3",
    "vee-validate": "^4.15.1",
    "vue": "^3.5.22",
    "vue-router": "^4.6.3",
    "vue3-apexcharts": "^1.10.0",
    "yup": "^1.7.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.37.0",
    "@tailwindcss/vite": "^4.1.16",
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/eslint-config-prettier": "^10.2.0",
    "eslint": "^9.37.0",
    "eslint-plugin-vue": "~10.5.0",
    "globals": "^16.4.0",
    "prettier": "3.6.2",
    "tailwindcss": "^4.1.16",
    "vite": "^7.1.11",
    "vite-plugin-vue-devtools": "^8.0.3"
  }
}