CODEWITHSUNDEEP
javascriptlaravelvue.jsvuetify.js
Kasun
Kasun

Reputation: 513

Unknown custom element: <v-app> in Root when using vue with laravel

I am trying to use vue and vuetify with Laravel. I already have an vue component working fine without Vuetify. When I install vuetify v1.5.1 and tried to use v-btn including v-app it gives me this errors in console.

Errors

I use these versions "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "vue": "^2.6.6", "vue-template-compiler": "^2.6.6"

app.js 

require('./bootstrap');
import 'vuetify/dist/vuetify.min.css'
window.Vue = require('vue');
import Vuetify from 'vuetify'


Vue.component('example-component', 
require('./components/ExampleComponent.vue').default);

Vue.component('daily-delivery-planner', 
require('./components/DailyDeliveryPlanner.vue').default);

Vue.use(Vuetify);

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

DailyDeliveryPlanner.vue

`<template>
<div class="page-content browse container-fluid">
  <div class="row">
      <div class="col-md-12">
          <div class="panel panel-bordered">
              <div class="panel-body">
                <div class="col-md-9">
                  <div class="form-group row">
                      <label for="day" class="col-sm-1 col-form-label custom-label">Select A Day</label>
                      <div class="col-sm-9">
                        <v-btn color="success">Success</v-btn>
                      </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="">
                      <h4>Route Plan Code : <span class="label label-info" id="routeplanno">{{ routeplan_no }}</span></h4>
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
</div>

</template>

<script>
    export default {

        data() {
           return {
             routeplan_no: "",
          };
       },

       methods: {
        getUserData: function() {
            axios.get('retreiveUserData')
                .then(({data}) => {
                    if(data.alert=='success'){
                        this.routeplan_no = data.data;
                    }else{
                        this.routeplan_no = Math.floor(1000 + Math.random() * 9000);
                    }
                });
        }
    },
    beforeMount() {
        this.getUserData();
    }
}
</script>`

functions and the everything work but the only problem is i can't use vuetify components.

browse.blade.php

@extends('voyager::master')

@section('content')
<v-app id="app">
    <daily-delivery-planner></daily-delivery-planner>
</v-app>

@endsection`

Why is it happening ? Any help would be appreciated !

Upvotes: 0

Views: 833

Answers (1)

Shuyi
Shuyi

Reputation: 916

v-app has an id of app, which get initialized by New Vue(), and then you are initializing it as an component as well, so it gets initialized twice by Vue. Also, error also indicates that your Vue version is too low.

Upvotes: 2

Related Questions