[Vuejs]-Can one still use runtime DOM manipulation in a Nuxt generated site?

by

0👍

✅

I found a way that works for me. Loading in Vue from the CDN via the header object of nuxt.config:

script: [
  {src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'}
],

will cause Vue to be loaded at runtime. Remember to load the full bundle with the compiler as we’re doing runtime templating. Now create a plugin for client only (set mode to ‘client’ OR name your file my-script.client.js) and place it inside the ~/plugins directory:

plugins: [
  {src: '~/plugins/my-script', mode: 'client' }
],

Inside my-script.js you can create a new Vue() which will mount a *.vue SFC:

import Vue from 'vue'; // Not sure if this is strictly required
import MyComponent from '@/components/MyComponent.vue';

new Vue({
  render: h => h(MyComponent)
}).$mount('#app');

Obviously for this to work you need a div with an id of #app inside the pre-rendered code.

Leave a comment