Is it possible to compile Vue.js templates to static HTML and CSS files?

Question

Recently I\'ve fallen in love with Vue.js\'s single file components. It\'s so much nicer to have a component\'s template and styles close to each other, and I\'m finding I write

Answer 1

From the official vuejs guide:

If you’re using Webpack, you can easily add prerendering with the prerender-spa-plugin. It’s been extensively tested with Vue apps - and in fact, the creator is a member of the Vue core team.

Answer 2

I would say that you can't do this because Vue uses a virtual DOM, it doesn't compile templates to HTML but to JavaScript render functions which is necessary to efficiently patch the DOM when data is updated.

I'm sure it's possible to do what you want to do with a bit of node magic to parse and output files, but that would be quite a large undertaking for something that would only have a minimal effect.

Answer 3

There are many plugins.

Install Vue Meta for smaller projects. If you only have a few static pages I'd recommend Vue meta and then creating a few HTML files for the same pages by hand or using a prerendering service.

The problem with prerendering is its only available with certain setups and can be difficult to install if you don't already have the ideal setup requiring you to rebuilt it over again for optimizing SEO and prerendering in Vue.js

For this reason I recommend the following:

For small apps: Vue Meta

npm install vue-meta --save

For medium to large apps with dynamic rendering:

nuxt.js with SSR (Server Side Rendering):

See this video search on YouTube for more information on how to build a web app with nuxt.js and SSR:

https://www.youtube.com/results?search_query=nuxt+js+and+ssr

Answer 4

What you are looking for is Server Side rendering. I would suggest you to have a look at Nuxt.js.

From VueJS docs:

Properly configuring all the discussed aspects of a production-ready server-rendered app can be a daunting task. Luckily, there is an excellent community project that aims to make all of this easier: Nuxt.js. Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. Better yet, you can even use it as a static site generator (with pages authored as single-file Vue components)! We highly recommend giving it a try.

It is super simple to get it started. If you use vue-cli:

$ vue init nuxt/starter <project-name>

It comes with all you normally need (Vuex, Router,..). Just keep in mind that it enforces some folder structure, that you have to follow.

Here is the list of commands that are included in the starter.

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

You will probably be mostly iterested in generate, as it

Build the application and generate every route as a HTML file (used for static hosting).

Also cool thing to note is that the project seems to be (at the time of writing this) under active development and we can look forward to more great features!