Vue aplikace pro přístup k API č.6 – Přidáme si Vuetify

11.12.2024 MaMusha Comments 0 Comment

Tento článek je 6 z 8 v seriálu Vue aplikace pro přístup k API

Zatím jsem vůbec nějak neřešila design našich stránek, ale dneska jsem se rozhodla že použiji knihovnu Vuetify. Takže pojďmě si ji do projektu přidat

npm install vuetify
npm install @mdi/font
npm install vite-plugin-vuetify -D

npm install vuetify

npm install @mdi/font

npm install vite-plugin-vuetify -D

Nejprve instalace samotné knihovny, pak v ní budu chtít používat material design icony a nakonec pro správnou integraci s Vite serverem nasitalujem plugin.

Upravíme si main.js

import './assets/main.css'

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

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import '@mdi/font/css/materialdesignicons.css'

const vuetify = createVuetify({
    components,
    directives,
  })

const app = createApp(App)

app.use(router)
app.use(vuetify)

app.mount('#app')

import './assets/main.css'

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

// Vuetify

import 'vuetify/styles'

import { createVuetify } from 'vuetify'

import * as components from 'vuetify/components'

import * as directives from 'vuetify/directives'

import '@mdi/font/css/materialdesignicons.css'

const vuetify = createVuetify({

components,

directives,

})

const app = createApp(App)

app.use(router)

app.use(vuetify)

app.mount('#app')

a aby nám vše fungovalo ještě musíme upravit vite.config.js, kde si přidáme plugin

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import vueDevTools from 'vite-plugin-vue-devtools'

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

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import vuetify from 'vite-plugin-vuetify'

import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/

export default defineConfig({

plugins: [

vue(),

vuetify({ autoImport: true }),

vueDevTools(),

resolve: {

alias: {

'@': fileURLToPath(new URL('./src', import.meta.url))

})

Series Navigation<< Vue aplikace pro přístup k API č.5 – Zabezpečení stránek pouze pro přihlášenéVue aplikace pro přístup k API č.7 – Vytvoříme si základní layout aplikace >>

Post Views: 97

Co hledám

co neumím, to se naučím

Vue aplikace pro přístup k API č.6 – Přidáme si Vuetify

11.12.2024 MaMusha Comments 0 Comment

Napsat komentář Zrušit odpověď na komentář