javascript - How to fix error and correctly use Vuetify in LaravelVue application - Stack Overflow

admin管理员组

文章数量:1335356

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 ponents 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 ponent.

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

How do I include the App ponent in my blade?

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 ponents 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 ponent.

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

How do I include the App ponent in my blade?

• javascript
• php
• laravel
• vue.js
• vuetify.js

Share Improve this question Follow edited Aug 2, 2019 at 4:05 Udhav Sarvaiya 10.1k1313 gold badges6060 silver badges6767 bronze badges asked Aug 1, 2019 at 19:42 longmaikellongmaikel 9922 silver badges66 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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 ing 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>

本文标签： javascriptHow to fix error and correctly use Vuetify in LaravelVue applicationStack Overflow