# Vite, Vue und Vuetify

Zuerst legst Du das Projekt an:

npm init -y
npm i vue vuetify 
npm i -D vite@2.2.4 vite-plugin-vue2

Danach erstellst Du die vite.config.js Datei mit folgendem Inhalt

//vite.config.js
const { createVuePlugin } = require('vite-plugin-vue2');

module.exports = {
  plugins: [createVuePlugin()]
};

Nun noch eine kleine index.html

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, height=device-height, viewport-fit=cover"/>
  <title>Vue+Vite+Vuetify</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

Ein main.js

//main.js
import Vue from "vue";
import App from "./App.vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.config.productionTip = false;

Vue.use(Vuetify);
const vuetify = new Vuetify({
  theme: {
    dark: false,
  },
});

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

Und eine App.vue

<!--App.vue-->
<template>
  <v-app>
    <v-main>
      Hello Vue+Vite+Vuetify
    </v-main>
  </v-app>
</template>

<script>
export default {
}
</script>

Nun muss lediglich noch in der package.json der vite Aufruf integriert werden:

...
"scripts": {
    "dev": "vite"
  },
...

Dann können wir über den Aufruf

npm run dev

unsere Anwendung starten und aufrufen.