Nuxt•4mo ago

How to reference node_modules js or css in certain view's `<head>`s?

Is there a way we can selectively embed a certain library's .css files in order to preload or prefetch it on a certain views? At the moment i know useHead() can be used like:

useHead(
script: {
  src: 'https://example.com'
},
link: {
    rel: 'preconnect'
    href: '...',
    ...
}

useHead(
script: {
  src: 'https://example.com'
},
link: {
    rel: 'preconnect'
    href: '...',
    ...
}

But that would only work if the script either is already hosted at an absolute url or directly relative to the folder, and not if it's a node_module lib. Let's say I've installed swiper/vue as a devDependency. It's hanging out at #imports How might I import swiper-bundle.min.jsor swiper-vue.css to reduce the render blocking time? I'm working on a very large app and pretty much all the CSS and scripts are loading at the same time ☹️

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How to reference node_modules js or css in certain view's `<head>`s?