Wenn man aus der Microsoft Welt kommt und Webseiten mit JQuery bearbeitet hat, dann sind UI Framworks wie Vue eine wahre Veränderung. In meiner ASP WebApp habe ich Vue2 über CDN eingebunden und Vue anstatt JQuery genutzt. Vue funktioniert aber am besten mit NodeJs. Der Versuch NodeJs zu erlernen verlief aber immer in Frust. Weil es keinen roten Faden gibt, wie etwas umgesetzt werden kann. Es gibt keinen besten Weg. Es gibt sehr viele neue Begriffe und Definitionen, die Stück um Stück erlernt werden müssen. Es ist definitiv ein anderes lernen wie eine erprobte Sprache wie C# oder Java.
Deshalb ist hier mein roter Faden. Ziel soll am eine App sein, die folgende Punkte mit sich bringt:
- Nuxt 3 als Wrapper über Vue3. Nuxt 3 schafft eine Ordnerstruktur und macht die imports z.B. überflüssig.
- Vuetify 3 Beta. Zwar ist es noch in Beta Phase, aber es wird das beste UI Framework (Meiner Meinung nach)
- Typescript: Die App soll in Typescript geschrieben sein
- Pinia wird unser Statemanagement anstatt Vuex
- Übersetzungen werden über i18n realisiert
- Daten werden über externe .NET 6 Minimal Api mit Swagger abgerufen
- Authorisierung erfolgt über eine ASP .NET 6 Proxy Anwendung
Installation
Voraussetzung
NodeJS, Visual Studio Code, Volar Extension. Aktuelle Links sind hier zu finden:
Nuxt 3 – Quick Start (nuxtjs.org)
In Visual Studio über „Strg + Shift + ö“ das Terminal öffnen
Neue App erstellen:
|
1 |
npx nuxi init nuxt-app |
Die App wird nun im Unterverzeichnis „nuxt-app“ erstellt. Daher müssen wir in das neue Verzeichnis navigieren
|
1 |
cd nuxt-app |
packages nachinstallieren:
|
1 |
npm i |
Vuetify installieren
Referenzen:
[Solved] vuetify icon not showing – Local Coder (Solution 5)
Unter „Version“ die neuste Version raussuchen
|
1 |
npm i vuetify@3.0.0-beta.1 |
Sass muss ebenfalls für Vuetify installiert werden
|
1 |
npm i sass |
Pinia als StateManager
|
1 |
npm i pinia |
|
1 |
npm i @pinia/nuxt --force |
und die mdi Icons für Vuetify
|
1 |
npm install import @mdi/font |
Plugins werden in Nuxt im plugins Verzeichnis erstellt. Also muss im Root ein neues Verzeichnis „plugins“ erstellt
In das plugins Verzeichnis wird eine neue Datei „vuetify.ts“ erstellt und folgendes kopiert:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import { createVuetify, ThemeDefinition } from 'vuetify' import * as components from 'vuetify/components' const myCustomLightTheme: ThemeDefinition = { dark: true, colors: { // background: '#FFFFFF', // surface: '#FFFFFF', // primary: '#6200EE', // 'primary-darken-1': '#3700B3', // secondary: '#03DAC6', // 'secondary-darken-1': '#018786', // error: '#B00020', // info: '#2196F3', // success: '#4CAF50', // warning: '#FB8C00', } } export default defineNuxtPlugin(nuxtApp => { const vuetify = createVuetify({ components, theme: { defaultTheme: 'myCustomLightTheme', themes: { myCustomLightTheme, } } }) nuxtApp.vueApp.use(vuetify) }) |
Jetzt muss noch die nuxt.config.ts angepasst werden und das css und der transpiler müssen mit vuetify verheiratet werden. Daher kann der folgende Teil einfach copy/pasted werden. Der Vite Teil wird bei mir als Fehler angezeigt. kompilieren geht trotzdem. Wem das stört, kann den vite Knoten auskommentieren
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { defineNuxtConfig } from 'nuxt' // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config export default defineNuxtConfig({ css: [ "vuetify/lib/styles/main.sass", "@mdi/font/css/materialdesignicons.css" ], build: { transpile: ["vuetify", "@pinia/nuxt"] }, vite: { define: { "process.env.DEBUG": false } } }) |
Jetzt sollte die App starten können:
In der Beta 1 läuft dauert der Start über 1 Minute. Ich hoffe das wird noch gefixt
|
1 |
npm run dev |
Weiter geht’s mit Teil 2 Layout: https://devandy.de/?p=890&preview=true
Login