Home » Javascript » Is it possible to pre-render some, but not all, Vue JS components?

Is it possible to pre-render some, but not all, Vue JS components?

Posted by: admin November 1, 2017 Leave a comment

Questions:

I’m relatively new to Vue JS but I’ve wanted to build something with it for some time. What I want to do is build an entire site as Vue JS components, have most of the site pre-rendered as static HTML, JS, and CSS, but keep a couple components as active Vue JS components.

For instance let’s say I have a navigation component, a footer component and a form component on my website that has 3 pages. The navigation and the footer appear on all 3 pages but the form only appears on 1 page. Could I build all of the components in Vue JS, then pre-render the navigation and footer as static, but keep just the form component as a live Vue JS component on the site? Would something like this be possible with Webpack? With Nuxt.js?

I hope this makes sense, thanks!

Edit: maybe this will be more clear. Let’s say I have a page with app1 and app2. I want app1 to be built in Vue JS but output static and app2 to remain a dynamic Vue JS component. So the output I want is this:

<div id="app1">

The actual rendered text

</div>

<div id="app2">

{{ message }}

</div>
Answers: