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

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.


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!

Tags:

Webpack

Vue.Js