我在Nuxt项目中使用vuetify时遇到了一个问题,我已经按照文档说你只需要安装@nuxtjs/vuetify
依赖到你的项目中,并在nuxt.config.js
文件的buildModules
部分添加一行。组件工作正常,但我没有看到任何css风格,有什么问题吗?
的数据
下面是我的nuxt.config.js文件
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'mounir-ssr-diabete',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
['@nuxtjs/vuetify', {}],
],
router: {},
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
[
'@nuxtjs/firebase',
{
config: {
apiKey: 'AIzaSyD_wgrl3S3RjpgwaEP2bDLpLDnIQz2C2Vc',
authDomain: 'mounir-ssr.firebaseapp.com',
projectId: 'mounir-ssr',
storageBucket: 'mounir-ssr.appspot.com',
messagingSenderId: '26338888590',
appId: '1:26338888590:web:be1893a374f3abc10cb2df',
measurementId: 'G-Y7YHDQDLM8',
},
services: {
auth: {
persistence: 'local', // default
initialize: {
onAuthStateChangedAction: 'onAuthStateChangedAction',
subscribeManually: false,
},
ssr: false,
},
},
},
],
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
}
字符串
2条答案
按热度按时间yruzcnhs1#
您应该将
vuetify
主题信息添加到nuxt.config.js
文件中的axios
和build
旁边。像这样..字符串
如果你不清楚,就问我。
dxxyhpgq2#
我也有同样的问题。在我的例子中,在模板代码中使用
v-app
解决了这个问题(例如,仅使用v-banner
并不包括Vuetify样式,但是当在它周围添加v-app
时,样式神奇地出现了)。如果你想覆盖内置的Vuetify样式,上面的Nuxt配置文件的答案可能会很有用,这对我来说也是如此(例如,通过v-app
来的v-application
样式需要调整)。