How can I load assets from the static folder in the head using Nuxt3 and nuxt.config.ts?

Question

I'm attempting to call files from the root static/css folder into the head (via the nuxt.config.ts file), but I can't work out how to get them to load.

Using npm run dev, in case that matters?

My code:

export default defineNuxtConfig({
    // loads / embeds css from file within a <style> element. 
    // this method works, but isn't the behavior I'm after
    css: ['@/static/css/css-dev.css'],
    app: {
        head: {
            link: [
                // none of these work. No errors in terminal / console... 
                // the styles within the files just aren't recognized / used
                { rel: 'stylesheet', href: '@/css/css-dev.css' },
                { rel: 'stylesheet', href: '~/css/css-dev.css' },
                { rel: 'stylesheet', href: '/css/css-dev.css' },
                { rel: 'stylesheet', href: 'css/css-dev.css' },
            ]
        }
    }
})

The files are added to the page in the head, but are not actually linking to anything valid. Attempting to load the files in the browser (localhost:3000/css/css-dev.css) just opens the same index page - not the file I'm attempting to link to.

I have the same issues when using useHead within another page (such as app.vue, or index.vue, etc).

export default {
  setup() {
    useHead({
      link: [
        { rel: 'stylesheet', href: '/css/css-dev.css' }, // or any of the above path examples
      ]
    })
  },
}

This doesn't seem to be tied to only css files... loading a <meta property="og:image"> this way also has the same issues.

Can someone explain what I'm doing wrong?

score 0 · Answer 1 · answered Aug 21 '23 at 13:13

I don't know what's wrong here. I stumbled on this question while I was dealing with a similar problem. However, the relative import and the import from assets doesn't work as it is mentioned : [here][1], but the import from public folder works fine. You can check [this][2], as I created (in pages/test) three different vue files:

one.vue: with relative / assets import (doesn't work):

    useHead({
  title: 'test',
  link: [
    /*doesn't work */ { rel: 'stylesheet', href: '~/assets/style.css' },
    /*doesn't work */ { rel: 'stylesheet', href: '~/pages/test/style.css' },
    
  ],
});

two.vue uses css @import (it works);

three.vue : uses import from public : it works :

    useHead({
  title: 'test',
  link: [/*works */ { rel: 'stylesheet', href: '/style.css' }],
});

you can try navigating the three pages via the provided link above. [1]: https://stackoverflow.com/a/67146962/14989975 [2]: https://stackblitz.com/edit/nuxt-starter-knkg6v?file=pages%2Ftest%2Fthree.vue

How can I load assets from the static folder in the head using Nuxt3 and nuxt.config.ts?

1 Answers1