Getting Vue to work with Sage 10 + Bud Vue - Runtime runtime compilation is not supported

sage
, ,
1

Hi there,

Running into some very strange issue with bud-vue and Sage 10.

I have just updated Acron on the project to version 3.1.

When running yarn dev to build the assets, vue components are not loading. When I look in the console I get this warning from Vue:

Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

The strange thing is, this is using the latest version of bud-vue, which is 6.11.0.

In the documentation for bud-vue, they stipulate that runtime compilation is set by default:

“The extension is pre-configured to support Vue 3 single file components (runtime only).”

All my other node packages are up to date and are set to the latest releases matching that of bud-vue

package.json

  "devDependencies": {
    "@roots/bud": "6.11.0",
    "@roots/bud-babel": "^6.11.0",
    "@roots/bud-tailwindcss": "6.11.0",
    "@roots/bud-vue": "^6.11.0",
    "@roots/sage": "6.11.0"
  },

I have tried the following to solve the issue, firstly manually declaring bud-vue to use template compilation with:

app.vue.set('runtimeOnly', true)

And trying to set an alias for vue to use the correct runtime bundler (which was needed in prior versions of bud-vue):

.alias('vue', app.path('@node_modules/vue/dist/vue.esm-bundler.js'))

Though nothing seems to be working. It’s almost like the config options are not reflecting…

If anyone has any insights, or has run into this problem and has solved it, I would really appreciate some help and guidance.

2

Hi @StevePrinsloo,

For bud-vue, the default is runtimeOnly set to true. This bundles the ‘runtime only’ version of Vue 3 (ie. no template compiler).

To include the full bundle, use:

app.vue.set('runtimeOnly', false)

No alias is required - you can remove that from your bud.config.js.

I can see why there is confusion here, as the warning generated by Vue is referring to ‘runtime compilation’, which is very similar terminology to ‘runtime only’. Perhaps the docs can be tweaked here to make clearer.

Remember to clean your build after changing these settings - yarn run bud clean or yarn dev --force.

3 Likes
3

Hi @talss89,

Thank you so much for your quick response. That fixed the issue! :slight_smile:

I think you are correct, the docs are a little confusing and need to be tweaked.

Perhaps even a few bud.config.mjs setup and project examples to illustrate when to use runtimeOnly as true and runtimeOnly as false .

Anyways, you are a legend, enjoy the rest of your day!

1 Like