Where to call "Vue.use(plugin)" when using SSR in Vue

Question

I have a plugin (bootstrap-vue) that I want to initialize with Vue.use(). Right now, I use it in the client entry (inside router.onReady()), but I get the following warning:

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

I use server-side-rendering (SSR) and am not sure where to call the plugin initialization properly. Thanks!

trying to put Vue.use(yourPlugin) next to the entry point of your app. — Sphinx
– Sphinx, Commented May 7, 2018 at 16:21
Thanks, that solved it already! A detailed answer for others having this question follows. — Hans Knöchel
– Hans Knöchel, Commented May 8, 2018 at 10:45

Hans Knöchel · Accepted Answer · 2018-05-08 10:47:50Z

1

Thanks to @Sphinx for the hint! The answer is to put it into the client (!) entry point of the Vue app, e.g. where new Vue() is called:

// Create the main Vue app
const app = new Vue({
    router,
    render: h => h(App)
})

// Register plugins
Vue.use(YourPlugin)

It will work properly with other SSR components of the Vue app.

answered May 8, 2018 at 10:47

Hans Knöchel

11.6k8 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Where to call "Vue.use(plugin)" when using SSR in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related