5

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>
MJR
  • 91
  • 2
  • 10
  • Do you mean [server-side rendering](https://ssr.vuejs.org/en/) some components? – Roy J Oct 26 '17 at 19:32
  • 1
    @RoyJ No, pre-rendering. I don't have control over the server on this project, just the frontend. So I want to build using Vue JS, but have most of the output be static, with the exception of a few components that need to be interactive. – MJR Oct 26 '17 at 19:38
  • I don't think that's a meaningful distinction in Vue. If your component doesn't change, it's static. – Roy J Oct 26 '17 at 19:46
  • 1
    @RoyJ It's kind of hard to explain why the project is set up this way, but I need to input static HTML, CSS and JS into a CMS, with the exception of components that will dynamic. So for instance I want to this in the CMS:
    Hello Vue!
    Not this:
    {{ message }}
    – MJR Oct 26 '17 at 19:51
  • You can do that. I'm not trying to be obtuse, but I don't see what you can't do. Vue doesn't require that you use any features at all. Straight HTML is fine. – Roy J Oct 26 '17 at 21:04
  • 1
    @RoyJ Yeah I'm sorry I'm kind of having a hard time describing what I want. So imagine I have a SPA with several routes and I use something like Nuxt.js to pre-render it and output it as a static website. It's my understanding that that site is basically no longer really using Vue JS, it was just built with Vue JS. A user viewing that website in a browser wouldn't know it was built with Vue JS, it would just be HTML, CSS and vanilla JS. But what if I wanted 90% of components on that website to be rendered as static and the remaining 10% to remain Vue JS components. Does that make sense? – MJR Oct 26 '17 at 21:13
  • yeah, it make sense. need something similar at out solution. We have some components with huge amount of nested components, that will not change for some cases, it can be fast-loaded as raw html. So we can describe this case like that: You have some data and you have some components. I think you can use createBundleRenderer and renderToString for that, but for now it's only my prediction, because I didn't test it yet. – i.Nemiro Feb 09 '20 at 14:10

0 Answers0