[Vuejs]-Front end not shaping in laravel 6.2

by

0👍

First in assets/js/components folder create a new file called Navbar.vue. Then in Navbar.vue write

<template>
<v-toolbar>
  <v-toolbar-items>
    <v-btn text>Link one</v-btn>
    <v-btn text>Link two</v-btn>
    <v-btn text>Link three</v-btn>
  </v-toolbar-items>
</template>
<script>
</script>

In you app.js add newly created component like so

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

Vue.component('navbar', require('./components/Navbar.vue').default);

const app = new Vue({
    el: '#app',
});

Then in your index.blade.php file change it to the following.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div id ="app">
      <navbar></navbar>
    </div>
    <script> src ="{{ asset('js/app.js') }}" </script>
</body>
</html>

And finally run npm run dev. Visit the page and now you should be able to see everything as it should be.

0👍

As i said in this reply, in Vuetify 2 when you create your Vue istance you must create a new istance of Vuetify also.

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify()
});

I suggest you also to add this after importing Vuetify:

import 'vuetify/dist/vuetify.min.css'

Leave a comment