正文 

当前位置： 首页 > 问答 >

如何在 nuxt js 中使用 vuetify 作为插件？

     2023-02-22     38

关键词：

【中文标题】如何在 nuxt js 中使用 vuetify 作为插件？【英文标题】：How to use vuetify in nuxt js as plugin? 【发布时间】：2020-04-23 21:43:53 【问题描述】：

我需要在我的 nuxt js 项目中使用 vuetify 作为插件。我试过包@nuxtjs/vuetify，但得到错误

无法分配给对象“#”的只读属性“base”

我已经从官方codesandbox 在线游乐场在本地服务器和共享主机上安装了我的 nuxt 项目。我一直遇到同样的错误。我尝试使用npm 和yarn 安装节点模块。如何使用 npm 包 vuetify 将新的 vuetify 版本添加到最新版本的 nuxt js 作为插件？

【问题讨论】：

你能解决这个问题吗？我在使用 nuxt 和 vuetify 的项目中遇到了相同的 Cannot assign to read only property 'base' of object '#' 问题。 不，还没有成功。我在nuxtjs + vuetifyjs 上的项目也有这样的问题。 NPM 包@nuxtjs/vuetify 仍然没有在 nuxt cli 上更新 【参考方案1】：

安装 vuetify 和 @mdi/font

使用以下代码在您的插件文件夹中创建一个文件 vuetify.js：

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

import colors from './../config/colors'

import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)

export default ctx => 
  const vuetify = new Vuetify(
    theme: 
      themes: 
        light: 
          ...colors
        ,
        dark: 
          // colors
        
      
    
  )
  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework

通过将 vuetify 添加到这样的插件来编辑 nuxt.config.js 文件


  ...
  plugins: ['~plugins/vuetify.js'],
  ...

【讨论】：

【参考方案2】：

我通过以下方式实现了这一点：

npm install --save vuetify

使用以下代码在您的插件文件夹中创建一个文件 vuetify.js：

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

Vue.use(Vuetify)

修改你的 nuxt.config.js：

   plugins: ['~plugins/vuetify.js'],
   build: 
     vendor: ['vuetify']

【讨论】：

如何编辑 Vuetify 的特定设置，例如你的原色？【参考方案3】：

我有/有同样的问题。我只是确保使用 package.json 中明确定义的 1.10.3 或更低版本

"@nuxtjs/vuetify": "1.10.3", （不与 ^1.10.3 一起使用）

我还注意到任何版本都会在每个 url 请求的末尾添加一个“未定义”404。我在 Nuxt / CMTY 上发帖，但他们的用户群为零，可以回答任何问题。

【讨论】：

【参考方案4】：

这里有关于这个问题的讨论：https://github.com/nuxt-community/vuetify-module/issues/268

修复自定义颜色并在外部文件中指定选项似乎会影响这一点。 如果您在选项中指定了颜色，请将primary: colors.blue 替换为primary: colors.blue.base。

【讨论】：

【参考方案5】：

在初始化 Nuxt 项目时选择 Vuetify 作为你的 UI 框架

在plugins/vuetify.js中新建一个文件

import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)

export default new Vuetify(
    theme: 
        light: true,
        themes: 
            light: 
                primary: colors.blue.darken2,
                accent: colors.grey.darken3,
                secondary: colors.amber.darken3,
                info: colors.teal.lighten1,
                warning: colors.amber.base,
                error: colors.deepOrange.accent4,
                success: colors.green.accent3
            
        
    
)

在nuxt.config.js中添加插件配置

export default 
  plugins: ['~/plugins/vuetify.js'],

重启服务器，npm run dev

图片示例： vuetify.js

完成！

【讨论】：

如何在 Nuxt.js 中使用 v-file-input 获取文件对象？

】如何在Nuxt.js中使用v-file-input获取文件对象？【英文标题】：Howtogetfileobjectusingv-file-inputinNuxt.js?【发布时间】：2021-03-1904:22:17【问题描述】：我使用了Vuetify.js作为Nuxt.Js的UI框架。当我输入文件我的应用程序时，我想获取文件对... 查看详情

Vuetify Nuxt.js：如何在轮播图标中添加路由链接

】VuetifyNuxt.js：如何在轮播图标中添加路由链接【英文标题】：VuetifyNuxt.js:howtoaddRoutinglinkinCarouselsicon【发布时间】：2021-01-1301:19:14【问题描述】：js和Vuetfiy我想在Carousels图标中添加路由链接。如果我按图标，它应该打开路由链接... 查看详情

如何更新 vuetify mdi 图标？ (Nuxt.js)

】如何更新vuetifymdi图标？(Nuxt.js)【英文标题】：Howtoupdatevuetifymdiicons?(Nuxt.js)【发布时间】：2020-06-0618:07:45【问题描述】：我在Nuxt.js上使用Vuetify。但我不能使用一些材料设计图标。例如<v-icon>mdi-cog</v-icon>显... 查看详情

Nuxt.js + vuetify 图像未加载

】Nuxt.js+vuetify图像未加载【英文标题】：Nuxt.js+vuetifyimagenotloading【发布时间】：2020-07-2515:22:12【问题描述】：我正在使用Nuxt.js+Vuetify，但图像无法加载到我的下一页文件中。例如，在我的./pages/browse/index.vue中，我有一个像这样的... 查看详情

nuxt.js 获取数据到 vuetify 表

】nuxt.js获取数据到vuetify表【英文标题】：nuxt.jsfetchingdatatovuetifytable【发布时间】：2021-01-2614:20:42【问题描述】：我在获取vuetify表中的数据时遇到问题，它没有在边表中显示任何数据。我的LaravelAPIRoute::get(\'/businesslist\',\'BusinessCo... 查看详情

Nuxt & Vuetify：如何控制 CSS 文件的加载顺序？

】Nuxt&Vuetify：如何控制CSS文件的加载顺序？【英文标题】：Nuxt&Vuetify:howtocontroltheorderinwhichCSSfilesareloaded?【发布时间】：2019-11-0202:11:11【问题描述】：在我的Nuxt/Vuetify应用程序中，我试图在Vuetify的CSS之后加载我的自定义CSS... 查看详情

在 nuxt.js 上添加暗模式切换以 vuetify app v2.0

】在nuxt.js上添加暗模式切换以vuetifyappv2.0【英文标题】：Addingadarkmodetoggletovuetifyappv2.0onnuxt.js【发布时间】：2020-04-1907:53:09【问题描述】：我正在使用nuxt.jsvuetify模板，nuxt.config.js已经有一个对象（如下所述），它定义了应用程序... 查看详情

Vuetify，Nuxt，在开发模式下使用摇树

】Vuetify，Nuxt，在开发模式下使用摇树【英文标题】：Vuetify,Nuxt,usetreeshakinginDevmode【发布时间】：2020-01-3116:58:15【问题描述】：使用Nuxtcreate-nuxt-app(https://nuxtjs.org/guide/installation#using-code-create-nuxt-app-code-)我选择了Vuetify作为我的UI。... 查看详情

如何在 Nuxt/Vuetify 中从头部删除 Google 字体 Roboto？

】如何在Nuxt/Vuetify中从头部删除Google字体Roboto？【英文标题】：HowtoremoveGooglefontRobotofromheadinNuxt/Vuetify?【发布时间】：2020-07-1322:48:38【问题描述】：默认情况下，Vuetify在Nuxt静态生成页面的头部包含Google字体“Roboto”。如何从头... 查看详情

npm 错误！纤维@4.0.2 安装：`node build.js ||在 Nuxt 中安装 Vuetify 时的 nodejs build.js`

】npm错误！纤维@4.0.2安装：`nodebuild.js||在Nuxt中安装Vuetify时的nodejsbuild.js`【英文标题】：npmerr!fibers@4.0.2install:`nodebuild.js||nodejsbuild.js`wheninstallingVuetifyinNuxt【发布时间】：2020-07-0320:38:18【问题描述】：我使用npxcreate-nuxt-app创建了一... 查看详情

在 Vuetify 复选框组件中，如何更改禁用的复选框框颜色？

】在Vuetify复选框组件中，如何更改禁用的复选框框颜色？【英文标题】：InVuetify\'scheckboxcomponent,Howtochangedisabledcheckbox\'sboxcolor?【发布时间】：2021-02-1417:17:07【问题描述】：我使用Vuetify.js作为Nuxt.js的UI框架，当复选框禁用值更改... 查看详情

“插槽激活器”如何在 vuetify 中工作？

】“插槽激活器”如何在vuetify中工作？【英文标题】：Howdoes\'slotactivator\'workinvuetify?【发布时间】：2018-08-1107:21:21【问题描述】：我正在使用Vuetify预定义模板“Google联系人”。链接：https://vuetifyjs.com/en/examples/layouts/googleContacts我... 查看详情

<v-icon> vuetify material Icon (mdi) 在 vuetify 和 nuxt 应用程序中显示问题？

】<v-icon>vuetifymaterialIcon(mdi)在vuetify和nuxt应用程序中显示问题？【英文标题】：<v-icon>vuetifymaterialIcon(mdi)showingprobleminvuetifyandnuxtapp?【发布时间】：2019-10-2412:09:59【问题描述】：我正在使用nuxt和vuetify。所有标签工作正常。... 查看详情

Vuetify + Nuxt：递归目录问题？

】Vuetify+Nuxt：递归目录问题？【英文标题】：Vuetify+Nuxt:RecursiveTableOfContentsissues?【发布时间】：2020-01-1009:40:34【问题描述】：我正在尝试使用Vuetify和Nuxt创建一个目录(TOC)组件。在本地，我正在使用来自的新nuxt应用程序（选择了vu... 查看详情

Nuxt 和 Vuetify。导航抽屉母鹿

】Nuxt和Vuetify。导航抽屉母鹿【英文标题】：NuxtandVuetify.navigationdrawerdoe【发布时间】：2020-01-1601:00:32【问题描述】：一个星期以来，我一直在努力解开这个谜团。我正在尝试在我的Nuxt/Vue网站中使用Vuetify设置一个侧边栏，人们点... 查看详情

如何使用 Nuxt.js 仅在一个组件中使用插件？

】如何使用Nuxt.js仅在一个组件中使用插件？【英文标题】：HowtouseplugininonlyonecomponentusingNuxt.js?【发布时间】：2021-11-1617:45:13【问题描述】：我正在用nuxt.js做一个简单的博客网站，我只需要在一个组件中导入编辑器，我不想使用n... 查看详情

在 Nuxt、Vue、jest 和 Vuetify 中为项目编写单元测试

】在Nuxt、Vue、jest和Vuetify中为项目编写单元测试【英文标题】：WritingUnittestforprojectinNuxt,Vue,jest&Vuetify【发布时间】：2020-06-2512:55:16【问题描述】：TL;DR从Vuetifylink复制的组件的单元测试通过了，但我在pug中编写的组件的实际单... 查看详情

Tabulator + Nuxt.js：如何在回调中使用 axios？

】Tabulator+Nuxt.js：如何在回调中使用axios？【英文标题】：Tabulator+Nuxt.js:Howtouseaxiosincallbacks?【发布时间】：2020-01-1608:48:53【问题描述】：我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件：<template><divref="table... 查看详情