\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n```\r\nindex.vue in pages dir \r\n```\r\n\r\n\u003Ctemplate>\r\n\t\u003Cdiv id=\"home\" class=\"container mx-auto text-center mt-12 mb-12\">\r\n\t\t\u003Ch2 class=\" text-2xl pb-5\">hello👋\u003C/h2>\r\n\t\u003C/div>\r\n\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineComponent } from 'vue'\r\nexport default defineComponent({\r\n\tsetup() {},\r\n})\r\n\u003C/script>\r\n\r\n```\r\nlayout default.vue \r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"container mx-auto\">\r\n \u003CHeader />\r\n\t\u003Cmain class=\"page\">\r\n\t\t\u003Cslot />\r\n\t\u003C/main> \r\n \u003CFooter />\r\n \u003C!-- \u003Cdiv class=\"h-screen p-8 bg-red-400\">\r\n \u003Cdiv class=\"h-full box-border p-8 rounded-lg bg-gray-100 text-gray-700\">\r\n \u003Cslot />\r\n \u003C/div>\r\n \u003C/div> -->\r\n \u003C/div>\r\n\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineComponent } from 'vue'\r\nimport Header from '../components/main/Header.vue'\r\nimport Footer from '../components/main/Footer.vue'\r\n\r\nexport default defineComponent({\r\n\tcomponents: {\r\n\t\tHeader,\r\n Footer\r\n\t},\r\n\tsetup() {},\r\n}) \r\n\u003C/script>\r\n\r\n```\r\n\r\n### Additional context\r\n\r\nnpm run dev , works fine\r\n\r\n### Logs\r\n\r\n_No response_",[3061,3062],{"name":3041,"color":3042},{"name":3044,"color":3045},12049,"resolveComponent can only be used in render() or setup().","2023-01-19T15:54:20Z","https://github.com/nuxt/nuxt/issues/12049",0.71468556,{"labels":3069,"number":3074,"owner":3032,"repository":3032,"state":3053,"title":3075,"updated_at":3076,"url":3077,"score":3078},[3070,3071],{"name":3029,"color":3030},{"name":3072,"color":3073},"2.x","d4c5f9",10114,"Custom directives didn't recognized by Nuxt v3","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10114",0.71600837,{"description":3080,"labels":3081,"number":3083,"owner":3032,"repository":3032,"state":3053,"title":3084,"updated_at":3085,"url":3086,"score":3087},"First of all, I wanted to say thanks for all your hard work. Nuxt.js rocks!\r\n\r\nSecond, I stumbled upon an issue with generated static sites, using [Vuetify with a custom theme](https://vuetifyjs.com/en/style/theme).\r\nThe custom theme's style tag isn't generated for *all* pages. In SSR mode everything works perfectly.\r\n\r\nHere's my `nuxt.config.js`:\r\n```\r\nconst { DateTime } = require('luxon');\r\nconst git = require('git-rev-sync');\r\nconst appConfig = require('./config')[process.env.NODE_ENV];\r\n\r\nmodule.exports = {\r\n /*\r\n ** Headers of the page\r\n */\r\n head: {\r\n titleTemplate: 'CallVU | %s',\r\n meta: [\r\n { charset: 'utf-8' },\r\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\r\n {\r\n hid: 'description',\r\n name: 'description',\r\n content: 'CallVU Form Studio',\r\n },\r\n {\r\n referrer: 'no-referrer',\r\n },\r\n ],\r\n link: [\r\n { rel: 'icon', type: 'image/png', href: './icon.png' },\r\n {\r\n rel: 'stylesheet',\r\n href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons',\r\n },\r\n ],\r\n },\r\n modules: ['@nuxtjs/axios', 'nuxt-device-detect'],\r\n axios: {\r\n baseURL: appConfig.API,\r\n },\r\n plugins: [\r\n '~/plugins/vue-signature-pad.js',\r\n '~/plugins/v-clipboard.js',\r\n '~/plugins/drag-drop.js',\r\n '~/plugins/vuetify.js',\r\n '~/plugins/filters.js',\r\n '~/plugins/i18n.js',\r\n ],\r\n css: ['~/assets/style/app.styl'],\r\n /*\r\n ** Customize the progress bar color\r\n */\r\n loading: { color: '#06CE9F' },\r\n /*\r\n ** Build configuration\r\n */\r\n build: {\r\n vendor: ['vuetify', 'vue-i18n'],\r\n extractCSS: true,\r\n /*\r\n ** Run ESLint on save\r\n */\r\n extend(config, ctx) {\r\n if (ctx.dev && ctx.isClient) {\r\n config.module.rules.push({\r\n enforce: 'pre',\r\n test: /\\.(js|vue)$/,\r\n loader: 'eslint-loader',\r\n exclude: /(node_modules)/,\r\n });\r\n }\r\n },\r\n },\r\n router: {\r\n middleware: 'i18n',\r\n base: process.env.NODE_ENV === 'development' ? '/' : '/cv-form-studio/',\r\n },\r\n env: {\r\n VER: process.env.npm_package_version,\r\n COMMIT: git.short(),\r\n BRANCH: git.branch(),\r\n BUILD_TIME: DateTime.local().toISODate(),\r\n ...appConfig,\r\n },\r\n};\r\n```\r\n\r\nand my Vuetify plugin:\r\n```\r\nimport Vue from 'vue';\r\nimport Vuetify from 'vuetify';\r\n\r\nVue.use(Vuetify, {\r\n theme: {\r\n primary: '#353E67',\r\n accent: '#06CE9F',\r\n },\r\n});\r\n```\r\n\r\nEdit: I also noticed that the `head` meta-data for the page isn't rendered.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2533\">#c2533\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3082],{"name":3072,"color":3073},2918,"Issue with Vuetify and Nuxt generate","2023-01-18T16:09:44Z","https://github.com/nuxt/nuxt/issues/2918",0.7164509,{"description":3089,"labels":3090,"number":3092,"owner":3032,"repository":3032,"state":3053,"title":3093,"updated_at":3094,"url":3095,"score":3096},"**Question**\r\nThere may be an obvious solution that I am overlooking, but I am not able to `import` my `main.scss` file from `assets` into a component.\r\n\r\n````scss\r\n\u003Cstyle lang=\"scss\" scoped>\r\n@import '~assets/main.scss';\r\n\u003C/style>\r\n````\r\nThis generates the following error: \r\n````\r\nThis dependency was not found:\r\n\r\n* !!vue-style-loader!css-loader!../node_modules/vue-loader/lib/style-compiler/index?{\"id\":\"data-v-3bb4be04\",\"scoped\":true,\"hasInlineConfig\":true}!sass-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./NavBar.vue in ./components/NavBar.vue\r\n\r\nTo install it, you can run: npm install --save !!vue-style-loader!css-loader!../node_modules/vue-loader/lib/style-compiler/index?{\"id\":\"data-v-3bb4be04\",\"scoped\":true,\"hasInlineConfig\":true}!sass-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./NavBar.vue\r\n````\r\n\r\nI have installed _vue-style-loader_ and added it to my config file:\r\n````javascript\r\nvendor: ['vue-style-loader'],\r\n````\r\n\r\nTLDR: **How can I import a SCSS stylesheet from `assets` into a component?**\r\n\r\nThanks, \r\nChristopher\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c519\">#c519\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3091],{"name":3072,"color":3073},601,"Extend Global SCSS Stylesheet in Component","2023-01-18T15:39:32Z","https://github.com/nuxt/nuxt/issues/601",0.716519,{"description":3098,"labels":3099,"number":3101,"owner":3032,"repository":3032,"state":3053,"title":3102,"updated_at":3103,"url":3104,"score":3105},"Hi there I am trying to modify the webpack config for our custom Sass/PostCSS setup. To do this I need to modify the vue-loader config to prevent the default Sass loader from being used.\r\n\r\nI am following the the instructions both [here](https://vue-loader.vuejs.org/en/configurations/advanced.html) and [here](https://nuxtjs.org/api/configuration-build#loaders)\r\n\r\nI have the build processes completing without any errors but when I load the application in the browser I get the following error.\r\n\r\n```\r\nTypeError: Cannot read property 'toLowerCase' of undefined\r\n at /Users/foobar/Projects/Vue/MyApp/node_modules/vue/dist/vue.runtime.common.js:92:38\r\n```\r\n\r\nI imagine this means there is something I need to define that I am not but I cannot find anything in either docs that I am missing.\r\n\r\nHere is my nuxt.config.js\r\n\r\n```\r\nmodule.exports = {\r\n /*\r\n ** Build configuration\r\n */\r\n build: {\r\n loaders: [\r\n {\r\n test: /\\.vue$/,\r\n loader: 'vue-loader'\r\n },\r\n {\r\n test: /\\.(css|scss)$/,\r\n use: [\r\n 'style-loader',\r\n { loader: 'css-loader', options: { importLoaders: 1 } },\r\n {\r\n loader: 'postcss-loader',\r\n options: {\r\n parser: 'postcss-scss',\r\n plugins: {\r\n 'postcss-import': {},\r\n 'postcss-simple-vars': {},\r\n 'postcss-strip-inline-comments': {},\r\n 'postcss-remify': {},\r\n 'precss': {},\r\n 'postcss-cssnext': {},\r\n 'cssnano': false\r\n }\r\n }\r\n },\r\n ]\r\n }\r\n ]\r\n },\r\n /*\r\n ** Headers\r\n ** Common headers are already provided by @nuxtjs/pwa preset\r\n */\r\n head: {},\r\n /*\r\n ** Customize the progress-bar color\r\n */\r\n loading: { color: '#3B8070' },\r\n /*\r\n ** Customize app manifest\r\n */\r\n manifest: {\r\n theme_color: '#3B8070'\r\n },\r\n /*\r\n ** Modules\r\n */\r\n modules: [\r\n '@nuxtjs/pwa'\r\n ]\r\n}\r\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c975\">#c975\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3100],{"name":3072,"color":3073},1107,"Advanced Webpack config","2023-01-18T15:40:45Z","https://github.com/nuxt/nuxt/issues/1107",0.7201596,{"labels":3107,"number":3116,"owner":3032,"repository":3032,"state":3053,"title":3117,"updated_at":3118,"url":3119,"score":3120},[3108,3109,3110,3113],{"name":3041,"color":3042},{"name":3044,"color":3045},{"name":3111,"color":3112},"nitro","bfd4f2",{"name":3114,"color":3115},"❗ p4-important","D93F0B",13095,"renderStyles does not render styles for app.vue dependencies","2023-01-19T16:52:49Z","https://github.com/nuxt/nuxt/issues/13095",0.7211741,{"description":3122,"labels":3123,"number":3124,"owner":3032,"repository":3125,"state":3053,"title":3126,"updated_at":3127,"url":3128,"score":3129},"I am using the module with `fontshare` as a provider. When checking `pageInsights` it shows that `@font-face` is not being used. When adding `fontain` module it resolves the issue.\r\n\r\n\u003Cimg width=\"741\" alt=\"Screenshot 2024-06-22 at 23 39 50\" src=\"https://github.com/nuxt/fonts/assets/33263129/a91b98cd-7b15-4a13-9588-35bd8c0a0366\">\r\n\r\n\r\n\u003Cimg width=\"663\" alt=\"Screenshot 2024-06-22 at 22 38 07\" src=\"https://github.com/nuxt/fonts/assets/33263129/0fe5a298-1dd2-4fb3-b476-520be7d2ac08\">\r\n\r\n\r\nwhen using `fontain`\r\n\r\n\r\n\u003Cimg width=\"964\" alt=\"Screenshot 2024-06-22 at 22 34 07\" src=\"https://github.com/nuxt/fonts/assets/33263129/dca00dbe-a0bc-4163-a55b-e584f97a2506\">\r\n\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v20.14.0`\r\n- Nuxt Version: `3.12.2`\r\n- CLI Version: `3.12.0`\r\n- Nitro Version: `2.9.6`\r\n- Package Manager: `npm@10.7.0`\r\n- Builder: `-`\r\n- User Config: `devtools`, `future`, `modules`, `runtimeConfig`, `app`, `routeRules`, `devServer`, `build`, `fonts`, `tailwindcss`\r\n- Runtime Modules: `@nuxt/eslint@0.3.13`, `@nuxtjs/tailwindcss@6.12.0`, `@nuxt/image@1.7.0`, `@nuxt/fonts@0.7.0`, `@nuxtjs/fontaine@0.4.3`\r\n- Build Modules: `-`\r\n",[],182,"fonts","`@font-face` not used with `fontshare` provider","2024-09-23T12:32:00Z","https://github.com/nuxt/fonts/issues/182",0.7234756,{"description":3131,"labels":3132,"number":3142,"owner":3032,"repository":3143,"state":3053,"title":3144,"updated_at":3145,"url":3146,"score":3147},"### Description\n\nHi, I am using Vue 3 and trying to dynamically change the theme color of nuxt-ui. I have the following code:\n\n```typescript\nconst appConfig = useAppConfig()\nappConfig.ui.colors.primary = color\n```\nHowever, this doesn’t seem to work as expected. I’m wondering if I’m using it incorrectly. Could you please advise how I can dynamically switch the theme in nuxt-ui in Vue 3?",[3133,3136,3139],{"name":3134,"color":3135},"question","d876e3",{"name":3137,"color":3138},"v3","49DCB8",{"name":3140,"color":3141},"vue","42b883",3952,"ui","Issue with dynamically changing theme colors in Nuxt UI using Vue 3","2025-05-12T13:05:27Z","https://github.com/nuxt/ui/issues/3952",0.72355026,["Reactive",3149],{},["Set"],["ShallowReactive",3152],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fGnqmnDVLovxMBZZdbMaR9oRTcJ6rownre6Pu_Btjy6M":-1},"/nuxt/fonts/13"]