Importing Style Tag of SFC to Other SFC in Vue.js

hadakadenkyu — Sun, 26 Jan 2025 03:06:38 +0000

This article is in response to issue where scoped style is not applied when extending components.

// Comp.vue
<script>
export default {
  data: () => ({
    text: 'Hello'
  })
};
</script>
<template>
  <p class="text">
    {{ text }}
  </p>
</template>
<style scoped>
.text {
  background-color: yellow;
  padding: 10px;
  font-size: 1.3rem;
}
</style>

// ExtendedComp.vue
<script>
import Comp from './Comp.vue';
export default {
  extends: Comp,
  data: () => ({
    text: 'Hello extended'
  })
};
</script>

I found that by writing load in the plugins section of vite.config.js, you can modify the SFC before building. I thought if I could bring the style tag of the extended component similarly, it would work, and it did.

Specifically, I defined the following plugin in vite.config.js.

// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import path from 'node:path'
import { readFileSync } from 'fs'
import { parseDocument } from 'htmlparser2'
import { findAll, getElementsByTagName, appendChild, removeElement } from 'domutils'
import { render } from 'dom-serializer';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    {
      async load(id) {
        if (id.endsWith('.vue')) {
          const source = readFileSync(id).toString();
          // It doesn't matter what parses the SFC, but let's use an HTML parser used in vue here.
          const dom = parseDocument(source);
          const stls = findAll(elem => elem.tagName === 'style' && elem.attribs?.src?.endsWith('.vue'), dom.children);
          if (stls.length === 0) {
            return source;
          }
          for (const stl of stls) {
            const src = stl.attribs.src;
            // If the style tag that references the .vue is left,
            // a compile error will occur due to duplicate style tags.
            // so remove it here.
            removeElement(stl);
            const absPath = path.resolve(path.dirname(id), src);
            // `resolve.alias` can be resolved with `this.resolve`,
            // but relative paths are not resolved, so I do it like this.
            const resolved = (await this.resolve(absPath)) || (await this.resolve(src));
            const source = readFileSync(resolved.id).toString();
            const vueDom = parseDocument(source);
            const vueStls = getElementsByTagName('style', vueDom.children);
            for (const vueStl of vueStls) {
              appendChild(dom, vueStl);
            }
          }
          return render(dom);
        }
      }
    },
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

Then specify the vue file with the style you want to refer to from the extended component.

// ExtendedComp.vue
<script>
import Comp from './Comp.vue';
export default {
  extends: Comp,
  data: () => ({
    text: 'Hello extended'
  })
};
</script>
<style src="./Comp.vue"></style>

Note: You can refer to it even without extending.

How to pass values from PHP to JavaScript using Laravel Vite

hadakadenkyu — Fri, 09 Aug 2024 02:35:40 +0000

`import.meta.url`.

For JavaScript modules, you can use the import.meta object to access its own meta information.

import.meta - JavaScript | MDN

Therefore,

<script type="module" src="app.js?someURLInfo=5"></script>

At this time, app.js module is able to get its own URL with query parameters and hash through import.meta.url.
In other words, You can pass values via query parameters like

new URL(import.meta.url).searchParams.get('someURLInfo') // '5';

Using with Laravel Vite

Normally you would use @vite directive to load js file like

@vite('resources/js/app.js')

so to pass a value through query parameter, you would write something like

@vite('resources/js/app.js?someURLInfo=5')

but this doesn't work.
To be precise, it works for local development by starting the development server with npm run dev, but when you deploy to production by running npm run build, it will fail to reference the generated js file and give you a 500 error.

Fortunately, according to the Laravel documentation the Vite plugin has a method called createAssetPathsUsing that changes the path value as an advanced customization.

https://readouble.com/laravel/11.x/en/vite.html#advanced-customization

In short, you can write like this.

    {{
        Vite::withEntryPoints(['resources/js/app.js'])
            ->createAssetPathsUsing(function (string $path, ?bool $secure) {
                return "/{$path}?someURLInfo=5";
            })
    }}

However, this now works fine in production, but when you start a development server with npm run dev and try to develop locally, it ignores what you set in createAssetPathsUsing and doesn't work.

Nonetheless, since one works well on the production server and the other works well on the development server, it seems like it would be a good idea to combine both. To do this, we need to determine if it is under development or not.

Luckily, the Vite class provides such a method.
The isRunningHot is it.

https://laravel.com/api/11.x/Illuminate/Support/Facades/Vite.html#method_isRunningHot

TL;DR

// Note that to create an alias for Vite
// 'Vite' => \Illuminate\Support\Facades\Vite::class,
@if(Vite::isRunningHot())
@vite('resources/js/app.js?someURLInfo=5')
@else
    {{
        Vite::withEntryPoints(['resources/js/app.js'])
            ->createAssetPathsUsing(function (string $path, ?bool $secure) {
                return "/{$path}?someURLInfo=5";
            })
    }}

DEV Community: hadakadenkyu

Importing Style Tag of SFC to Other SFC in Vue.js

How to pass values from PHP to JavaScript using Laravel Vite

import.meta.url.

Using with Laravel Vite

TL;DR

`import.meta.url`.