Vite | Tailwind | PrimeVue Setup

So richtest du ein Vue.js-Projekt mit Vite, Tailwind und PrimeVue ein

Einsteiger30 Min.

Früher, als die Vue CLI der Standardweg war, um Vue.js-Projekte anzulegen, war die Einrichtung von Tailwind und PrimeVue ziemlich aufwendig. Mit Vite geht das viel einfacher und schneller. Gehen wir die manuelle Einrichtung Schritt für Schritt durch.

Ein neues Projekt anlegen

Zuerst legen wir ein neues Projekt an. Dazu erstellen wir einen neuen Ordner und eine neue package.json-Datei.

bash

mkdir myproject
cd myproject
touch package.json

Dann fügen wir der package.json-Datei folgenden Inhalt hinzu:

package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.26"
  },
  "devDependencies": {
    "@types/node": "^24",
    "@vitejs/plugin-vue": "^6.0.3",
    "@vue/tsconfig": "^0.8.1",
    "typescript": "^5.9.3",
    "vite": "^7.3.1",
    "vue-tsc": "^3.2.2"
  }
}

Nun können wir die Abhängigkeiten installieren:

bash

npm install
yarn install
pnpm install

TypeScript-Konfiguration

Als Nächstes brauchen wir drei neue Dateien für die TypeScript-Konfiguration.

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "types": ["vite/client"],
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

tsconfig.node.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "types": ["node"],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Vite-Konfiguration

Als Nächstes erstellen wir die Vite-Konfigurationsdatei.

vite.config.ts

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
});

Einstiegspunkt einrichten

Als Nächstes erstellen wir die Dateien index.html, main.ts und App.vue als Einstiegspunkt unserer Anwendung.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Vue Vite, Tailwind and PrimeVue setup</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      type="module"
      src="/src/main.ts"
    ></script>
  </body>
</html>

src/main.ts

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

src/App.vue

<template>
  <div>Hello app</div>
</template>

<script setup lang="ts"></script>

Danach solltest du den Entwicklungsserver mit npm run dev, yarn dev oder pnpm dev starten können und in deinem Browser unter http://localhost:5173 die Nachricht „Hello app“ sehen.

Tailwind einrichten

Füge die Tailwind-Pakete zu deiner package.json-Datei hinzu.

json

{
  "name": "myproject",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.1.18",
    "tailwindcss": "^4.1.18",
    "vue": "^3.5.26"
  },
  "devDependencies": {
    "@types/node": "^24",
    "@vitejs/plugin-vue": "^6.0.3",
    "@vue/tsconfig": "^0.8.1",
    "typescript": "^5.9.3",
    "vite": "^7.3.1",
    "vue-tsc": "^3.2.2"
  }
}

Installiere dann die neuen Abhängigkeiten:

bash

npm install
yarn install
pnpm install

Als Nächstes fügst du das Tailwind-Plugin zur Vite-Konfiguration hinzu:

vite.config.ts

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

import tailwindcss from '@tailwindcss/vite';

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  plugins: [vue(), tailwindcss()],
});

Der nächste Schritt ist eine neue CSS-Datei, in der wir die Basisstile von Tailwind importieren können.

src/assets/main.css

@import 'tailwindcss';

Zum Schluss müssen wir die CSS-Datei in unserer main.ts-Datei importieren.

src/main.ts

import './assets/css/main.css';

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Nachdem du den Entwicklungsserver neu geladen hast, sollte Tailwind in deinem Projekt funktionieren.

PrimeVue einrichten

Als Nächstes fügen wir PrimeVue zu unserem Projekt hinzu. Dafür ergänzen wir weitere Abhängigkeiten in unserer package.json-Datei.

json

{
  "name": "myproject",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@primeuix/themes": "^2.0.2",
    "@tailwindcss/vite": "^4.1.18",
    "primevue": "^4.5.4",
    "tailwindcss": "^4.1.18",
    "tailwindcss-primeui": "^0.6.1",
    "vue": "^3.5.26"
  },
  "devDependencies": {
    "@types/node": "^24",
    "@vitejs/plugin-vue": "^6.0.3",
    "@vue/tsconfig": "^0.8.1",
    "typescript": "^5.9.3",
    "vite": "^7.3.1",
    "vue-tsc": "^3.2.2"
  }
}

Installiere dann die neuen Abhängigkeiten:

bash

npm install
yarn install
pnpm install

Jetzt müssen wir die CSS-Dateien von PrimeVue in unserer main.css-Datei importieren.

src/assets/main.css

@import 'tailwindcss';
@import 'tailwindcss-primeui';

Um PrimeVue zu initialisieren, können wir eine Theme-Funktion hinzufügen, die wir in unserer main.ts-Datei aufrufen. Erstelle dazu eine neue Datei unter src/theme/index.ts mit folgendem Inhalt:

src/theme/index.ts

import { type App } from 'vue';

import PrimeVue from 'primevue/config';

// PrimeVue Services
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';

// PrimeVue Themes
import Aura from '@primeuix/themes/aura';
import { definePreset } from '@primeuix/themes';

// PrimeVue Directives
import { FocusTrap, Ripple } from 'primevue';

const preset = definePreset(Aura, {
  semantic: {
    primary: {
      50: '#fff1ed',
      100: '#fee6e0',
      200: '#fec8ba',
      300: '#fead95',
      400: '#fd9167',
      500: '#f97316',
      600: '#c65a0f',
      700: '#944108',
      800: '#652a04',
      900: '#3c1601',
      950: '#260b01',
    },
  },
});

export const theme = (app: App) => {
  app.use(PrimeVue, {
    ripple: true,
    theme: {
      preset,
      options: {
        darkModeSelector: '.dark',
        cssLayer: {
          name: 'primevue',
          order: 'theme, base, primevue',
        },
      },
    },
  });

  app.use(ConfirmationService);
  app.use(ToastService);

  app.directive('ripple', Ripple);
  app.directive('focustrap', FocusTrap);
};

Wie du siehst, erstellen wir ein eigenes Preset auf Basis des Aura-Themes. Außerdem aktivieren wir den ConfirmationService und den ToastService sowie die Ripple-Direktive für die Buttons.

In der main.ts-Datei können wir nun diese Theme-Funktion aufrufen:

src/main.ts

import './assets/css/main.css';

import { createApp } from 'vue';
import App from './App.vue';
import { theme } from './theme';

createApp(App).mount('#app');
const app = createApp(App);

theme(app);

app.mount('#app');

Verwendung

Jetzt können wir PrimeVue-Komponenten in unserer Anwendung verwenden. Zum Beispiel können wir einen Button zu unserer App.vue-Datei hinzufügen:

src/App.vue

<template>
    <div>
        Hello app
        <Button label="Click Me" />
    </div>
</template>

<script setup lang="ts">
import { Button } from 'primevue';
</script>

Du solltest nun einen gestylten PrimeVue-Button in deiner Anwendung sehen.

Das war's! Du hast erfolgreich ein Vue.js-Projekt mit Vite, Tailwind und PrimeVue eingerichtet.

Vite | Tailwind | PrimeVue Setup

Ein neues Projekt anlegen

TypeScript-Konfiguration

Vite-Konfiguration

Einstiegspunkt einrichten

Tailwind einrichten

PrimeVue einrichten

Verwendung

Kommentare