romhml · Jun 20, 2025 · Jun 20, 2025 · Jun 20, 2025
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -12,7 +12,7 @@ import type { Collection, PluginConfig, PluginOptions } from './types'
 
 export * from './types'
 
-export const compodium = /* #__PURE__ */ (options: PluginOptions) => {
+export function resolveConfig(options: PluginOptions): PluginConfig {
   const exampleDir = {
     path: joinURL(options.rootDir, options.dir, 'examples'),
     pattern: '**/*.{vue,tsx}'
@@ -50,11 +50,16 @@ export const compodium = /* #__PURE__ */ (options: PluginOptions) => {
       }))
     : []
 
-  const config: PluginConfig = {
+  return {
     ...options,
     libraryCollections,
-    componentCollection
+    componentCollection,
+    baseUrl: '/'
   }
+}
+
+export const compodium = /* #__PURE__ */ (options: PluginOptions) => {
+  const config = resolveConfig(options)
 
   return [
     collectionsPlugin(config),

diff --git a/packages/core/src/runtime/root.vue b/packages/core/src/runtime/root.vue
@@ -29,8 +29,9 @@ async function importComponent(path: string) {
   if ((window as any)?.__buildAssetsURL) {
     return await import(/* @vite-ignore */ (window as any)?.__buildAssetsURL(path)).then(c => c.default)
   }
-  return await import(/* @vite-ignore */ joinURL('/@fs/' + path)).then(c => c.default)
+  return await import(/* @vite-ignore */ joinURL(import.meta.env.BASE_URL, '/@fs/', path)).then(c => c.default)
 }
+
 async function onUpdateComponent(payload: Parameters<CompodiumHooks['renderer:update-component']>[0]) {
   combo.value = []
   component.value = null

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -56,6 +56,7 @@ export type PluginOptions = {
 export type PluginConfig = PluginOptions & {
   libraryCollections: Collection[]
   componentCollection: Collection
+  baseUrl: string
 }
 
 export type IconifyIcon = string & {}

diff --git a/packages/examples/src/assets/ui/index.css b/packages/examples/src/assets/ui/index.css
@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
 @layer properties;
 :root, :host {
   --spacing: 0.25rem;

diff --git a/packages/nuxt/src/runtime/nuxt-root.vue b/packages/nuxt/src/runtime/nuxt-root.vue
@@ -4,19 +4,22 @@ import NuxtRoot from '#build/compodium/root.mjs'
 import CompodiumRoot from '@compodium/core/runtime/root.vue'
 
 import { useNuxtApp } from '#imports'
+import { joinURL } from 'ufo'
 
 const nuxtApp = useNuxtApp()
 const url = import.meta.server ? nuxtApp.ssrContext?.url : window.location.pathname
+const app = useNuxtApp()
 
-if (url?.startsWith('/__compodium__/renderer')) {
+const rendererUrl = joinURL(app.$config.app.baseURL, '/__compodium__/renderer')
+
+if (url?.startsWith(rendererUrl)) {
   // Silence Nuxt warnings on unused pages / layouts
-  const app = useNuxtApp()
   app._isNuxtPageUsed = true
   app._isNuxtLayoutUsed = true
 }
 </script>
 
 <template>
-  <CompodiumRoot v-if="url?.startsWith('/__compodium__/renderer')" />
+  <CompodiumRoot v-if="url?.startsWith(rendererUrl)" />
   <NuxtRoot v-else />
 </template>
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -41,6 +41,7 @@
     "defu": "^6.1.4",
     "mlly": "^1.7.4",
     "pathe": "^2.0.3",
+    "ufo": "^1.6.1",
     "unplugin": "^2.3.5"
   }
 }
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
@@ -1,11 +1,12 @@
 import type { CompodiumMeta, PluginOptions } from '@compodium/core'
-import { compodium as core } from '@compodium/core'
+import { compodium as core, resolveConfig } from '@compodium/core'
 import { rendererPlugin } from './plugins/renderer'
 import { vueDevtoolsPlugin } from './plugins/vueDevtools'
 import { defu } from 'defu'
 import { libraryCollections } from '@compodium/examples'
 import { existsSync } from 'node:fs'
 import { resolve } from 'pathe'
+import type { VitePlugin } from 'unplugin'
 
 export const compodium = /* #__PURE__ */ (opts?: Partial<Omit<PluginOptions, '_nuxt' | 'rootDir'>>) => {
   const options = defu(opts, {
@@ -24,10 +25,18 @@ export const compodium = /* #__PURE__ */ (opts?: Partial<Omit<PluginOptions, '_n
     options.componentDirs = options.componentDirs.concat(collections)
   }
 
+  const config = resolveConfig(options)
+
   return [
-    core(options),
-    rendererPlugin(options),
-    vueDevtoolsPlugin(options)
+    {
+      configResolved(viteConfig) {
+        config.baseUrl = viteConfig.base
+      }
+    } as VitePlugin,
+
+    core(config),
+    rendererPlugin(config),
+    vueDevtoolsPlugin(config)
   ]
 }
 

diff --git a/packages/vue/src/plugins/renderer.ts b/packages/vue/src/plugins/renderer.ts
@@ -1,24 +1,25 @@
 import type { VitePlugin } from 'unplugin'
-import type { PluginOptions } from '@compodium/core'
+import type { PluginConfig } from '@compodium/core'
 import { readFileSync, existsSync } from 'node:fs'
 import { dirname, resolve } from 'node:path'
 import { resolvePathSync } from 'mlly'
+import { joinURL } from 'ufo'
 
-export function rendererPlugin(options: PluginOptions): VitePlugin {
+export function rendererPlugin(config: PluginConfig): VitePlugin {
   return {
     name: 'compodium:renderer',
     enforce: 'pre',
     configureServer(server) {
       server.middlewares.use('/__compodium__/renderer', async (_req, res) => {
         try {
           // TODO: Should read the user's index.html and replace the body.
-          const indexPath = resolve(options.rootDir, 'index.html')
+          const indexPath = resolve(config.rootDir, 'index.html')
           let index = readFileSync(indexPath, 'utf-8')
           index = index.replace(
             /<body[^>]*>[\s\S]*<\/body>/i,
             `<body>
               <div id="compodium"></div>
-              <script type="module" src="/@compodium/renderer.ts"></script>
+              <script type="module" src="${joinURL(config.baseUrl, '/@compodium/renderer.ts')}"></script>
             </body>`
           )
           res.setHeader('Content-Type', 'text/html')
@@ -37,10 +38,10 @@ export function rendererPlugin(options: PluginOptions): VitePlugin {
     load(id) {
       if (id === '\0renderer.ts') {
         // Read the user's main entrypoint file
-        const mainPath = resolve(options.rootDir, options.mainPath ?? 'src/main.ts')
+        const mainPath = resolve(config.rootDir, config.mainPath ?? 'src/main.ts')
 
         if (!existsSync(mainPath)) {
-          throw new Error(`[Compodium] failed to resolve main file ${options.mainPath}.`)
+          throw new Error(`[Compodium] failed to resolve main file ${config.mainPath}.`)
         }
 
         const mainDir = dirname(mainPath)

diff --git a/packages/vue/src/plugins/vueDevtools.ts b/packages/vue/src/plugins/vueDevtools.ts
@@ -1,12 +1,12 @@
 import type { VitePlugin } from 'unplugin'
-import type { PluginOptions } from '@compodium/core'
+import type { PluginConfig } from '@compodium/core'
 import { colors } from 'consola/utils'
 import { version } from '../../package.json'
+import { joinURL } from 'ufo'
 
-export function vueDevtoolsPlugin(_options: PluginOptions): VitePlugin {
+export function vueDevtoolsPlugin(config: PluginConfig): VitePlugin {
   return {
     name: 'compodium:devtools:vue',
-
     configureServer(server) {
       const _printUrls = server.printUrls
 
@@ -15,6 +15,7 @@ export function vueDevtoolsPlugin(_options: PluginOptions): VitePlugin {
         _printUrls()
         for (const url of urls.local) {
           const compodiumUrl = url.endsWith('/') ? `${url}__compodium__/devtools/` : `${url}/__compodium__/devtools/`
+
           console.log([
             colors.magenta(`  ➜  `),
             colors.bold(colors.white(`Compodium:`)),
@@ -58,7 +59,7 @@ export function vueDevtoolsPlugin(_options: PluginOptions): VitePlugin {
             injectTo: 'head-prepend' as const,
             attrs: {
               type: 'module',
-              src: `@id/virtual:compodium:devtools`
+              src: joinURL(config.baseUrl, `/@id/virtual:compodium:devtools`)
             }
           }
         ]

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {
-    workspace: [
+    projects: [
       'packages/*'
     ],
     env: {