Poi Vue Mini Tut Part 7

Part 7. Add static file functions

Using the poi plugin-vue-static tool. General rules are as follows.

Add @poi/plugin-vue-static to config file
Export Vue instance (without mounting) in entry file
Use vue-router with history mode
Ensure the id of root element is app

So we run:

$ yarn add @poi/plugin-vue-static –dev

Then create a file called .poi.config.js in root with the below content

module.exports = {
entry: ‘./index.js’,
plugins: [
// The routes to generate
// Only useful for `poi build`
routes: [‘/’] // default

In index.js add at the bottom:

// Export the Vue instance
export default app

The id of outermost element must be set to `app`, thats already done.

In router.js add above routes:

// history mode is required!
mode: ‘history’,

Finally, at this point we will fix the browser address in each view so its not showing “Poi App”, open up each file in “views” folder (4), and add in the export default section, under the page name:

head: {
title: ‘Home – My Website’

Change the title for each view according to the page name/title/description

Clone Full Project From Github

$ git clone https://github.com/minimallinux/poivue2.git

Author: Paul Anthony McGowan

Web Technology & Linux Enthusiast, Javascript Afficiado, General Observer Of World Corruption. Builder Of A Variety Of Web Properties And Campaigner Against Serious Government Criminality. Founder of Vorteasy

Leave a Reply

Your email address will not be published. Required fields are marked *