Giters

nuxt / nuxt

The Intuitive Vue Framework.

Home Page:https://nuxt.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to get prefix for assets in node_modules - to use with useHead

modbender opened this issue · comments

commented

Discussed in #27096

This is more of a question, but needed more priority for me, as I don't see anyone interested in answering if left in Discussions.
I have searched a lot of the past month about this, but couldn't find any solution.

I am using pinia to create a theme store where I store multiple parts of primevue theme (theme, mode, color).

plugins/theme.server.js

export default defineNuxtPlugin((nuxtApp) => {
  const themeStore = useThemeStore();

  const baseUrl = "/_nuxt/";
  const themeName = `${themeStore.theme}-${themeStore.mode}-${themeStore.color}`;

  useHead({
    htmlAttrs: {
      class: themeStore.mode,
    },
    link: [
      {
        rel: "stylesheet",
        href: `${baseUrl}primevue/resources/themes/${themeName}/theme.css`,
      },
    ],
  });
});

I can import it directly as primevue/resources/themes/aura-dark-green/theme.css but I want it to be dynamic yet added to SSR.

When using the CSS directly in nuxt.config I see the URL as below.

http://localhost:3000/_nuxt/node_modules/.pnpm/primevue@3.49.1_vue@3.4.26/node_modules/primevue/resources/themes/aura-dark-green/theme.css

Using dynamic css import

import(`primevue/resources/themes/${themeName}/theme.css`);

also doesn't resolve to the node_module css path, instead gives

WARN [Vue Router warn]: No match found for location with path "/_nuxt/primevue/resources/themes/aura-dark-green/theme.css"

So how do I get the prefix _nuxt/node_modules/.pnpm/primevue@3.49.1_vue@3.4.26/node_modules part in my plugin?

commented

Try using https://vitejs.dev/guide/features.html#glob-import.\

(node_modules won't be present after the build so passing the full FS path might work in dev mode but won't work in production.)