How to fix error and correctly use Vuetify in Laravel/Vue application

Question

I have a problem. I installed Vuetify to my existing Laravel application (of course I had installed Vue before). My friend started to create templates with vuetify. Then we found an error in the console.

The error is:

'app' has been removed, use '' instead.

The application works correctly but we have this error. I think it is because we're using the application incorrectly. I was trying to include Vue components to blade template for a few ways but any were not well. I tried using <v-app>, <app> in blade, deleted <v-app> from App.vue and mixed different ways ineffectively.

This is part of my app.js:

const app = new Vue({  
   el:'#app',
   router,
   store,
   vuetify,
   render:h => h(App)
});

This is App.vue

<template>
  <v-app>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

This is blade template where I include vue component.

@extends('setup')
  @section('app')
     <div id="app">
        <App></App>
     </div>
  @endsection

How do I include the App component in my blade?

Cathy Ha Cathy Ha · Accepted Answer · 2019-08-01T22:15:45

This looks like a Vuetify versioning issue. In older versions of Vuetify you can create an app bar by using <v-toolbar app></v-toolbar>. Now the API has changed (starting with version 2.0+. If you just downloaded from npm I'm guessing you grabbed the latest version) - you have to use <v-app-bar app></v-app-bar> in place of adding the "app" prop to the toolbar. This is where the error is coming from.

As for how to include Vue and Vuetify correctly in your application, you must use the v-app tag when using Vuetify. And you must identify your Vue app with an id. The typical syntax is:

<div id="app">
    <v-app>
        Your code here
    </v-app>
</div>

How to fix error and correctly use Vuetify in Laravel/Vue application

1 Answers