\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_",[2888,2889],{"name":2867,"color":2868},{"name":2870,"color":2871},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":2896,"number":2903,"owner":2879,"repository":2879,"state":2880,"title":2904,"updated_at":2905,"url":2906,"score":2907},[2897,2900],{"name":2898,"color":2899},"pending triage","E99695",{"name":2901,"color":2902},"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":2909,"labels":2910,"number":2912,"owner":2879,"repository":2879,"state":2880,"title":2913,"updated_at":2914,"url":2915,"score":2916},"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>",[2911],{"name":2901,"color":2902},2918,"Issue with Vuetify and Nuxt generate","2023-01-18T16:09:44Z","https://github.com/nuxt/nuxt/issues/2918",0.7164509,{"description":2918,"labels":2919,"number":2921,"owner":2879,"repository":2879,"state":2880,"title":2922,"updated_at":2923,"url":2924,"score":2925},"**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>",[2920],{"name":2901,"color":2902},601,"Extend Global SCSS Stylesheet in Component","2023-01-18T15:39:32Z","https://github.com/nuxt/nuxt/issues/601",0.71651894,{"description":2927,"labels":2928,"number":2930,"owner":2879,"repository":2879,"state":2880,"title":2931,"updated_at":2932,"url":2933,"score":2934},"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>",[2929],{"name":2901,"color":2902},1107,"Advanced Webpack config","2023-01-18T15:40:45Z","https://github.com/nuxt/nuxt/issues/1107",0.7201596,{"labels":2936,"number":2945,"owner":2879,"repository":2879,"state":2880,"title":2946,"updated_at":2947,"url":2948,"score":2949},[2937,2938,2939,2942],{"name":2867,"color":2868},{"name":2870,"color":2871},{"name":2940,"color":2941},"nitro","bfd4f2",{"name":2943,"color":2944},"❗ 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":2951,"labels":2952,"number":2953,"owner":2879,"repository":2954,"state":2880,"title":2955,"updated_at":2956,"url":2957,"score":2958},"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":2960,"labels":2961,"number":2971,"owner":2879,"repository":2972,"state":2880,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### 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?",[2962,2965,2968],{"name":2963,"color":2964},"question","d876e3",{"name":2966,"color":2967},"v3","49DCB8",{"name":2969,"color":2970},"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,{"description":2978,"labels":2979,"number":2982,"owner":2879,"repository":2879,"state":2880,"title":2983,"updated_at":2984,"url":2985,"score":2986},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v16.18.1\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@8.19.2\r\n- Builder: vite\r\n- User Config: build, routeRules, runtimeConfig, modules, i18n, css, plugins, devtools, eslint, vite, nitro, sourcemap, typescript\r\n- Runtime Modules: @nuxtjs/eslint-module@4.1.0, @nuxtjs/i18n@8.0.0-beta.12, @bootstrap-vue-next/nuxt@0.1.2, nuxt-jsonld@2.0.8\r\n- Build Modules: -\n\n### Reproduction\n\nI tried to make a reproduction in the stackblitz but somehow it seemed to work there. I am hoping then that maybe you can at least point me to the right direction and I can either find out the cause of this issue or at least find a way to reproduce it. Here are at least some tiny details:\r\n\r\nCSS config in nuxt.config.ts:\r\n\r\n`css: ['vue-final-modal/style.css', '~/assets/css/main.scss'],`\r\n\r\nmain.scss file includes import of bootstrap-vue-next and some separate files like e.g. variables.scss.\n\n### Describe the bug\n\nAfter updating Nuxt to version 3.6, the styles in our app are broken which forces us into staying at version 3.5. When opening the built output, the styles are not loaded. Styles from within pages and components are loaded fine but not those imported via css config prop in nuxt.config.ts.\r\n\r\nThere is also no error or warning when running the build or preview command. The strange thing also is that the styles are there when running the dev command.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2980,2981],{"name":2867,"color":2868},{"name":2898,"color":2899},21911,"Styles set in nuxt.config.ts css prop are not part of the build","2023-07-03T09:47:55Z","https://github.com/nuxt/nuxt/issues/21911",0.72382116,["Reactive",2988],{},["Set"],["ShallowReactive",2991],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fGnqmnDVLovxMBZZdbMaR9oRTcJ6rownre6Pu_Btjy6M":-1},"/nuxt/fonts/13"]