[英]How to fix error and correctly use Vuetify in Laravel/Vue application
I have a problem. 我有个问题。 I installed Vuetify to my existing Laravel application (of course I had installed Vue before). 我将Vuetify安装到了现有的Laravel应用程序中(当然我之前已经安装了Vue)。 My friend started to create templates with vuetify. 我的朋友开始使用vuetify创建模板。 Then we found an error in the console. 然后,我们在控制台中发现一个错误。
'app' has been removed, use '' instead. “ app”已被删除,请改用“”。
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. 我试图通过几种方法将Vue组件包括到刀片模板中,但是效果并不理想。 I tried using <v-app>
, <app>
in blade, deleted <v-app>
from App.vue and mixed different ways ineffectively. 我尝试在刀片中使用<v-app>
, <app>
,从App.vue中删除了<v-app>
,并无效地混合了多种方式。
This is part of my app.js: 这是我的app.js的一部分:
const app = new Vue({
el:'#app',
router,
store,
vuetify,
render:h => h(App)
});
This is App.vue 这是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. 这是刀片模板,其中包含vue组件。
@extends('setup')
@section('app')
<div id="app">
<App></App>
</div>
@endsection
How do I include the App component in my blade? 如何在刀片中包含App组件?
This looks like a Vuetify versioning issue. 这看起来像是Vuetify版本控制问题。 In older versions of Vuetify you can create an app bar by using <v-toolbar app></v-toolbar>
. 在旧版本的Vuetify中,您可以使用<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. 现在,API已更改(从2.0+版本开始。如果您只是从npm下载,我猜您已获取最新版本)-您必须在<v-app-bar app></v-app-bar>
中使用向工具栏添加“ app”道具的位置。 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. 至于如何在应用程序中正确包含Vue和Vuetify,则在使用Vuetify时必须使用v-app
标签。 And you must identify your Vue app with an id. 并且您必须使用ID标识您的Vue应用。 The typical syntax is: 典型的语法是:
<div id="app">
<v-app>
Your code here
</v-app>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.