Build a static HTML website with Poi
> Update: Official docs for this feature: https://poi.js.org/plugins/vue-static.html
Poi can magically turn your Vue single-page application into a static HTML website, i.e. each page of your website is pre-rendered at build time.
Getting started with a regular Vue app, the only change you need to make is exporting the Vue instance you have:
📝 index.js:
📝 App.vue
That’s it! Make sure the id of root element is app
and your router is under history mode.
Finally you can use @poi/plugin-vue-static
to generate static HTML files.
📝 poi.config.js
In development mode, i.e. running with the poi
command, this plugin doesn’t really do too much, your app will still be running as an SPA.
In production mode, i.e. built with the poi build
command, this plugin uses vue-server-renderer
to generate static HTML pages for routes
. In this mode it’s quite similar to how nuxt generate
works.
Demo
The website of the official Vue online chat community is built by Poi, and it’s pre-rendered by this plugin too.