How to enable runtime template compiler?

[Thomasan1999]

I'm using components which are sent from API and loaded via Vue.component(). I need the runtime template compiler for that. With Webpack, I could use the option runtimeCompiler: true. Can I achieve the same thing with Vite?

[tptech]

I have a similar (the same) issue.

We're building a new application using Vue 3 that is backed by a headless content management system (CMS), to implement a multi-tenanted financial application. We have a number of custom components that are used from within the CMS content to manage transactional financial data (display and interaction). Since the content is coming from the CMS, it needs to be compiled at runtime to include the component functionality.

I've been experimenting with the various implementations of v-runtime-template from here, and here.

Like you, @Thomasan1999, we could do this using the Vue-Cli/webpack build and setting the runtimeCompiler: true setting in vue.config.js, but I'd rather move forward with the modern tooling of vite.

From reading the vite documentation, vite appears to use rollup for bundling the dependencies, and is capable of using rollup plugins to augment and vary the bundling process. From the documentation of the vue3-runtime-template component documentation linked above, I can see configuration information for getting the vue runtime compiler included in the build - when using rollup directly; now I'm trying to work out how to apply this knowledge to do this with vite.

From the vue3-runtime-template documentation it recommends the following rollup configuration:

// vue.config.js
module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          vue$: 'vue/dist/vue.esm-bundler.js',
      // ...

Looking at the initial generated configuration for vite in vite.config.ts, I see:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

So, extrapolating from the vite documentation (here and here), and combining the vue.config.js information listed above, I've tried using alias in the vite.config.ts to get what I want.

But I don't know enough about bundling, the different module types, and rollup in general, to work out the right configuration to make it work - or even if I'm on the right track with this idea.

I suspect it's a combination of alias, and/or resolve.alias, to resolve vue/dist/vue.esm-bundler.js instead of the non-compiler version of Vue. And also, do I do this before, after or instead of the vue() plugin in vite.config.ts?

Can somebody please point me in the right direction to solve this configuration problem?

I don't want to have to abandon vite over this issue alone.

[tptech]

SOLUTION

Okay … after more investigation, this configuration for vite.config.ts is working for me, and it's successfully including the runtime compiler:

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

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js'
        }
    },
  plugins: [
      vue()
  ]
})

And this is my package.json:

{
  "name": "exp1",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.6",
    "vue3-runtime-template": "^1.0.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.0",
    "@vue/compiler-sfc": "^3.0.5",
    "typescript": "^4.3.2",
    "vite": "^2.5.1",
    "vue-tsc": "^0.2.2"
  }
}

Hope this helps.

Cheers, S t u a r t .

[s5b]

No, you don't need vue3-runtime-template in your dependencies, it's just a component that I was using to test the runtime template processing.

I'm sourcing my page content from a headless content management system (CMS) and I was testing with a component which would compile that external content into my runtime application.

PS: I posted the tptech comments.

[Thomasan1999]

Thanks for the answer. I was not sure if you need with Vue 3 because I was using the compiler with Vue 2.

[pols63]

Hi! Can the runtime compiler access the project components? How?

[bhenderson]

I have the same question (I think) as @pols63. I had to go with @fazulk answer because I'm using vue 2 and it is working, but the template string can't access global components (like Vuetify v-btn). I have this in my vite.config.js

import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    ...
    Components({ resolvers: [VuetifyResolver()] }),
  ]
})

The console displays this warning:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[fr1g]

that's pretty nice! thx (althought im using v2 lol)

[fazulk]

If anyone is coming here looking for vue 2 with vite adding this worked for me:

resolve: {
    alias: {
      vue: 'vue/dist/vue.esm.js',
    }
  }

[plweil]

Oh lord, I've been looking for a solution to this all day. Haven't found it in any documentation or migration tutorials.
Thank you, @fazulk !

[spectrachrome]

Thank you very much!

[gfonsecapilarte]

Thanks, I don't understand why this isn't everywhere!

[danilo-zazz]

Obrigado. Salvou meu dia

[fr1g]

Yay! it works, thx

[noel-schenk]

For me this didn't do it as dist is only generated after it needed the esm bundler.

This worked for me, also make sure __dirname is set!
vue: path.resolve(__dirname, 'node_modules', 'vue', 'dist', 'vue.esm-bundler.js'),

[carlosmolano]

It worked for me in Vue 2 like this:

` import * as path from "path";
...
alias: {
vue: path.resolve(__dirname, 'node_modules', 'vue', 'dist', 'vue.esm.js'),

    },

`