How to Precompile Vue 3 Components using Vite and Use Them as JS Module in Static HTML?

Question

How to Precompile Vue 3 Components using Vite and Use Them as JS Module in Static HTML?

58 Views Asked by Rahul Dutt At 06 March 2024 at 02:49

I'm currently exploring Vue 3 with Vite for a project, and I'm aiming to optimize the loading time of my web application. My strategy involves precompiling Vue components and using them as JavaScript modules in static HTML files. However, I want to build these components one at a time, and I plan to pass the component path as a build argument.

Here are the specifics of what I'm trying to achieve:

Precompile Vue 3 components: I want to optimize performance by precompiling Vue components.
Utilize Vite for development and build processes: I aim to use Vite for its speed and efficiency.
Build components one at a time: Instead of compiling all components at once, I want to build them individually.
Pass component path as a build argument: The path to the component to be built should be passed as a build argument.

Despite researching Vue's documentation and Vite's documentation, I couldn't find a clear guide on how to implement this specific setup.

Could someone provide a step-by-step guide or point me to the right resources on how to precompile Vue 3 components using Vite, building them one at a time, and passing the component path as a build argument? I'm particularly interested in seamlessly incorporating these precompiled components as JavaScript modules in static HTML files.

Any help or guidance on this matter would be greatly appreciated. Thank you!

Original Q&A

There are 2 best solutions below

hlsimoes On 06 March 2024 at 03:29

Currently, Vite does not have built-in functionality to precompile Vue components individually, but you can install the @vue/compiler-sfc package, which is the same compiler used by Vite.

After installing, you create a file (build.js) at the root of the project containing the individual component build rules and configure your package.json:

"scripts": {
  "build:component": "node build.js"
}

Then, when executing the script, you pass the component:
$ npm run build:component src/components/YourComponent.vue

**Rahul Dutt** · Accepted Answer · 2024-03-13T02:27:55.730000

I was able to compile my Vue 3 SFCs using the following Vite configuration:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const parseComponentArg = () => {
  const arg =
    process.env.COMPONENT_ARG ||
    "default/path/to/your/component.vue:MyComponent"; // Default argument format
  const [path, name] = arg.split(":");
  return { path, name };
};

const { path: componentPath, name: componentName } = parseComponentArg();

export default defineConfig({
  plugins: [vue({
    isProduction: true,
  })],
  build: {
    lib: {
      entry: componentPath, // Specify the path to your Vue component
      name: componentName, // Specify the name of your component library
      formats: ['umd']
    },
    rollupOptions: {
      external: ["vue", "lodash", "moment"], // Specify which modules are external
      output: {
        dir: componentPath.replace(/\/[^\/]+$/, ""), // Output directory (same directory as the source)
        entryFileNames: `${componentName}.js`, // Output file name
        globals: {
          vue: "Vue"
        },
      },
    },
  }
});

The HTML that I am progressively enhancing looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="/components/HelloWorld/HelloWorld.js"></script>

    <div id="app">
        {{ message }}
        <hello-world />
    </div>

    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {
            message: "Hello Vue! From Vue 3 + Vite",
          };
        },

      });
      app.component("hello-world", HelloWorld);
      app.mount("#app");

    </script>
  </body>
</html>

Build Command for Vite:

COMPONENT_ARG="./components/HelloWorld/HelloWorld.vue:HelloWorld" npm run build

How to Precompile Vue 3 Components using Vite and Use Them as JS Module in Static HTML?

There are 2 best solutions below

Related Questions in VUE.JS

Related Questions in VUEJS3

Related Questions in VITE

Related Questions in ROLLUPJS

Trending Questions

Popular # Hahtags

Popular Questions