Forum

laravel 8 + vue 3 +...
 
Notifications
Clear all

laravel 8 + vue 3 + vuetify 3, quick start app.js

2 Posty
1 Users
0 Reactions
633 Widok
0
Topic starter

example code + font fix

2 Answers
0
Topic starter

install (for latest version check https://github.com/vuetifyjs/vuetify/releases)

npm install @mdi/font -D
npm install --save vue@next && npm install --save-dev vue-loader@next
npm install vuetify@3.0.0-alpha.12
require('./bootstrap');
 
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'
import '@mdi/font/css/materialdesignicons.css'
 
const vuetify = createVuetify({components,directives})
const app = createApp({vuetify});
 
app.use(vuetify)
app.mount('#app')

and welcome.blade.php

   <body class="antialiased">
			<div id="app">
				<v-app>
					<v-app-bar color="grey-lighten-2"></v-app-bar>
					<v-navigation-drawer color="grey-darken-2" permanent></v-navigation-drawer>
					<v-main>
					  <v-card height="200px"></v-card>
					</v-main>
				  </v-app> 
			</div>
		
    </body>

 

0
Topic starter

and VUE3, VUE-ROUTER implementation

 

import { createWebHistory, createRouter } from "vue-router";
....

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

...

const vuetify = createVuetify({components,directives})
const app = createApp({});
 
app.use(router)
app.use(vuetify)
app.mount('#app')

Odpowiedź

Author Name

Author Email

Your question *

 
Preview 0 Revisions Saved
Share: