如何在Nuxt.js中将Vuetify作为插件使用？

huangapple
go评论187阅读模式
英文:

How to use vuetify in nuxt js as plugin?

问题

我需要在我的Nuxt.js项目中作为插件使用Vuetify。我尝试了@nuxtjs/vuetify包，但出现错误

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

如何在Nuxt.js中将Vuetify作为插件使用？

我从官方codesandbox在线播放器中安装了我的Nuxt项目，它在本地服务器和共享托管上都出现了相同的错误。我尝试使用npm和yarn来安装节点模块。我如何将最新版本的Vuetify添加到最新版本的Nuxt.js中作为插件，使用npm包vuetify？

英文:

I need to use vuetify in my nuxt js project as plugin. I've tried package @nuxtjs/vuetify but get error

> Cannot assign to read only property 'base' of object '#<Object>'

如何在Nuxt.js中将Vuetify作为插件使用？

I've install my nuxt project from official codesandbox online playground in local server and on shared hosting. All the time I got the same error. I tried install node modules using npm and yarn. How I can add fresh vuetify version to last version of nuxt js as plugin with npm package vuetify?

答案1

得分: 6

安装 Vuetify 和 @mdi/font

在你的插件文件夹中创建一个名为 vuetify.js 的文件，其中包含以下代码：

  1. import Vue from 'vue'
  2. import Vuetify from 'vuetify'
  4. import colors from './../config/colors'
  6. import 'vuetify/dist/vuetify.min.css'
  7. import '@mdi/font/css/materialdesignicons.css'
  8. Vue.use(Vuetify)
  10. export default ctx => {
  11.   const vuetify = new Vuetify({
  12.     theme: {
  13.       themes: {
  14.         light: {
  15.           ...colors
  16.         },
  17.         dark: {
  18.           // 颜色设置
  19.         }
  20.       }
  21.     }
  22.   })
  23.   ctx.app.vuetify = vuetify
  24.   ctx.$vuetify = vuetify.framework
  25. }

编辑 nuxt.config.js 文件，将 vuetify 添加到 plugins 中，如下所示：

  1. {
  2.   ...
  3.   plugins: ['~plugins/vuetify.js'],
  4.   ...
  5. }
英文:

Install vuetify and @mdi/font

Create a file vuetify.js in your plugins folder with the following code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. import Vue from &#39;vue&#39;
  2. import Vuetify from &#39;vuetify&#39;
  4. import colors from &#39;./../config/colors&#39;
  6. import &#39;vuetify/dist/vuetify.min.css&#39;
  7. import &#39;@mdi/font/css/materialdesignicons.css&#39;
  8. Vue.use(Vuetify)
  10. export default ctx =&gt; {
  11.   const vuetify = new Vuetify({
  12.     theme: {
  13.       themes: {
  14.         light: {
  15.           ...colors
  16.         },
  17.         dark: {
  18.           // colors
  19.         }
  20.       }
  21.     }
  22.   })
  23.   ctx.app.vuetify = vuetify
  24.   ctx.$vuetify = vuetify.framework
  25. }

<!-- end snippet -->

Edit nuxt.config.js file by adding vuetify to plugins like this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. {
  2.   ...
  3.   plugins: [&#39;~plugins/vuetify.js&#39;],
  4.   ...
  5. }

<!-- end snippet -->

答案2

得分: 3

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

npm install --save vuetify

在您的插件文件夹中创建一个名为vuetify.js的文件，并添加以下代码：

  1. import Vue from 'vue'
  2. import Vuetify from 'vuetify'
  4. Vue.use(Vuetify)

修改您的nuxt.config.js：

  1.    plugins: ['~plugins/vuetify.js'],
  2.    build: {
  3.      vendor: ['vuetify']
  4.    }
英文:

I achieved this with the following:

npm install --save vuetify

create a file vuetify.js in your plugins folder with the following code:

  1. import Vue from &#39;vue&#39;
  2. import Vuetify from &#39;vuetify&#39;
  4. Vue.use(Vuetify)

Amend your nuxt.config.js:

  1.    plugins: [&#39;~plugins/vuetify.js&#39;],
  2.    build: {
  3.      vendor: [&#39;vuetify&#39;]
  4.    }

答案3

得分: 1

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

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

英文:

There is a discussion of this issue here: https://github.com/nuxt-community/vuetify-module/issues/268

Fixing custom colours and specifying options in external files seem to affect this.
If you have colours specified in the options, replace primary: colors.blue with primary: colors.blue.base.

答案4

得分: 0

我有/曾经有过同样的问题。我只需确保在package.json中明确定义为1.10.3或更低版本

  1. "@nuxtjs/vuetify": "1.10.3"

而不是使用^1.10.3。

我还注意到，任何超过这个版本的版本还会在每个URL请求的末尾添加一个"undefined" 404。我在Nuxt / CMTY上发布了帖子，但他们没有用户回答任何问题。

英文:

I have / had same issue. I simply made sure to use version 1.10.3 or below defined explicitly in package.json

"@nuxtjs/vuetify": "1.10.3", (not with the ^1.10.3)

I also noticed any version over this also adds an "undefined" 404 to the end of every url request. I posted on Nuxt / CMTY but they have a user base of zero people who answer any questions.

答案5

得分: 0

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

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

  1. import Vue from 'vue'
  2. import Vuetify from 'vuetify'
  3. import colors from 'vuetify/es5/util/colors'
  4. Vue.use(Vuetify)
  6. export default new Vuetify({
  7. 	theme: {
  8. 		light: true,
  9. 		themes: {
  10. 			light: {
  11. 				primary: colors.blue.darken2,
  12. 				accent: colors.grey.darken3,
  13. 				secondary: colors.amber.darken3,
  14. 				info: colors.teal.lighten1,
  15. 				warning: colors.amber.base,
  16. 				error: colors.deepOrange.accent4,
  17. 				success: colors.green.accent3
  18. 			}
  19. 		}
  20. 	}
  21. })

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

  1. export default {
  2.   plugins: ['~/plugins/vuetify.js'],
  3. }

重新启动服务器，运行 npm run dev。

一个图像示例：
vuetify.js

完成！

英文:

Choose Vuetify as ur UI Framework when initial a Nuxt project

Create a new file in plugins/vuetify.js

  1. import Vue from &#39;vue&#39;
  2. import Vuetify from &#39;vuetify&#39;
  3. import colors from &#39;vuetify/es5/util/colors&#39;
  4. Vue.use(Vuetify)
  6. export default new Vuetify({
  7. 	theme: {
  8. 		light: true,
  9. 		themes: {
  10. 			light: {
  11. 				primary: colors.blue.darken2,
  12. 				accent: colors.grey.darken3,
  13. 				secondary: colors.amber.darken3,
  14. 				info: colors.teal.lighten1,
  15. 				warning: colors.amber.base,
  16. 				error: colors.deepOrange.accent4,
  17. 				success: colors.green.accent3
  18. 			}
  19. 		}
  20. 	}
  21. })

Add the plugin config inside nuxt.config.js

  1. export default {
  2.   plugins: [&#39;~/plugins/vuetify.js&#39;],
  3. }

Restart server, npm run dev

An image example:
vuetify.js

Done!

答案6

得分: 0

以下是翻译好的内容：

1- 设置 Vuetify

  1. 使用以下命令安装 Vuetify 和 sass：
  2. yarn add vuetify@next sass

2- 确保你的 package.json 现在类似于以下内容：

  1. // package.json
  2. "devDependencies": {
  3.   "nuxt": "3.0.0-rc.1"
  4. },
  5. "dependencies": {
  6.   "sass": "^1.51.0",
  7.   "vuetify": "^3.0.0-beta.1"
  8. }

3- 创建你的 Vuetify 插件

  1. 你需要在插件文件夹中创建此文件并将以下代码放入其中。
  3. // plugins/vuetify.js
  4. import { createVuetify } from 'vuetify'
  5. import * as components from 'vuetify/components'
  6. import * as directives from 'vuetify/directives'
  8. export default defineNuxtPlugin(nuxtApp => {
  9.   const vuetify = createVuetify({
  10.     components,
  11.     directives,
  12.   })
  14.   nuxtApp.vueApp.use(vuetify)
  15. })

4- 配置 Nuxt 2 或 3 使用我们的新插件

  1. 在此部分，你应该将以下代码放入 `nuxt.config.ts` 文件中，如下所示。
  3. // nuxt.config.ts
  4. import { defineNuxtConfig } from 'nuxt'
  6. // https://v3.nuxtjs.org/api/configuration/nuxt.config
  7. export default defineNuxtConfig({
  8.   css: ['vuetify/lib/styles/main.sass'],
  9.   build: {
  10.     transpile: ['vuetify'],
  11.   },
  12.   vite: {
  13.     define: {
  14.       'process.env.DEBUG': false,
  15.     },
  16.   },
  17. })

5- 最后，为了测试你是否已正确执行了这些步骤，你可以在你的代码中使用此组件来查看 Vuetify 是否已正确安装。

  1. <v-btn>按钮</v-btn>

提示：如果你已经完成了这些步骤，或者想要使用新的组件，在许多情况下最好停止并重新启动你的项目一次。

英文:

you can do the following steps in order and finally use Vuetify components:

1- Setup vuetify

  1. yarn add vuetify@next sass

2- Your package.json should now look similar to the following:

  1. // package.json
  2.    &quot;devDependencies&quot;: {
  3.       &quot;nuxt&quot;: &quot;3.0.0-rc.1&quot;
  4.     },
  5.    &quot;dependencies&quot;: {
  6.       &quot;sass&quot;: &quot;^1.51.0&quot;,
  7.       &quot;vuetify&quot;: &quot;^3.0.0-beta.1&quot;
  8.     }

3- Creating your Vuetify plugin

You must create this file in the plugin folder and put these codes inside it.

  1. // plugins/vuetify.js
  2. import { createVuetify } from &#39;vuetify&#39;
  3. import * as components from &#39;vuetify/components&#39;
  4. import * as directives from &#39;vuetify/directives&#39;
  6. export default defineNuxtPlugin(nuxtApp =&gt; {
  7.   const vuetify = createVuetify({
  8.     components,
  9.     directives,
  10.   })
  12.   nuxtApp.vueApp.use(vuetify)
  13. })

4- Configure Nuxt 2 or 3 to use our new plugin

In this section, you should put these codes in the nuxt.config.ts file like this

  1. // nuxt.config.ts
  2. import { defineNuxtConfig } from &#39;nuxt&#39;
  4. // https://v3.nuxtjs.org/api/configuration/nuxt.config
  5. export default defineNuxtConfig({
  6.   css: [&#39;vuetify/lib/styles/main.sass&#39;],
  7.   build: {
  8.     transpile: [&#39;vuetify&#39;],
  9.   },
  10.   vite: {
  11.     define: {
  12.       &#39;process.env.DEBUG&#39;: false,
  13.     },
  14.   },
  15. })

5- Finally, in order to test that you have done the steps correctly, you can use this component in your code to see if Vuetify is installed correctly or not.

  1. &lt;v-btn&gt;Button&lt;/v-btn&gt;

Tip: If you have done these steps or you want to use a new component, in many cases it is better to stop and restart your project once.

huangapple
  • 本文由 发表于 2020年1月6日 18:36:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/59610554.html
  • node.js
  • nuxt.js
  • vue.js
  • vuejs2
  • vuetify.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定

Copyright ©  开发者交流平台 版权所有.

闽 ICP 备 2022019110 号 - 1
  • 开发者交流平台

    本页二维码