Anatomy Of A Pyschopath

So what is Poi?

Poi is a higher level tool that uses webpack under the hood. By default, it comes with a bunch of presets and plugins already pre-configured for most common cases. Extra configurations can be done using a poi.config.js file. The underlining webpack config can also be mutated from the Poi config file.

It prepares for you a development setup with Hot Module Replacement and a dev server, and a production setup optimized for fast load and performance by minifying and mangling the code, producing optimized bundles, applying caching patterns and more.

It also enables to use Svelte as a poi plugin (the magical disappearing ui framework) which compiles javascript at build time and has a range of other goodies.

Svelte

This post is about the new (ish) POI build tool and its use for setting up a Vue JS app quickly. It just maps a small project I have started with the intention of Using a Vue Frontend with either a WordPress (Rest API) backend, or possibly a Slim PHP Rest API backend. Its a small series which I will add to as it progresses.

It takes the Poi starter tut a bit further and uses aspects of the Vue-CLI setup process to set up a project quickly. The first 7 parts take us to a 4 page app set up with the router, axios (for http requests), poi config basics and so on.

Code is available on Github if anyone gets stuck.

This is a starter for POI Vue JS Projects, with basics like router, axios and /components/App files ready to build on.

This particular one is intended for use with a Vue front end and a WordPress Back end using the wp-json api.

But those bits can easily be removed if not required (“yarn remove axios”, and references to axios in index.js) and it can be used for anything, using the Poi build tool

It uses index.js as starting point to build out the project.

It needs recent Nodejs/npm/yarn installed on the machine, so get those first.

This post covers the first 2 parts to get set up.

Part 1. Setting up with POI for Vue JS and WordPress Rest API Backend.

We start with just an index.js and router.js file and build from there, using POI.
So first install POI (always locally) in a new project – create a folder poiwpvue

Then add the basics

$ cd poiwpvue
$ yarn add poi –dev or ($ npm install -D poi)
$ yarn add axios –dev (for http requests)
$ yarn add vue-router –dev (for routing)

Create a blank index.js and a router.js file and add below in to the index.js only (leave router.js blank until later).

import Vue from “vue”;
import axios from ‘axios’;
import router from ‘./router’

Vue.use(axios);
const vm = new Vue({
el: “#app”,
render: h => h(“h2”, “Hello Lets try some http requests!”)
});
export const HTTP = axios.create({
//http://jsonplaceholder.typicode.com/
baseURL: `https://webmobapps.com/wp-json`,
//leave below for later
//headers: {
// Authorization: ‘Bearer {token}’
//}
});

Now create/add build and dev scripts in package.json

“scripts”: {
“start”: “poi index.js”,
“build”: “poi build index.js”
}

Run the start script to check its working.

$ npm start – should load at http://localhost:4000

So its working! thats the basic project started with Vue/Webpack etc included and axios/router added and commenced (but not set up properly yet). It just outputs a message which is hard coded in to the index.js file.

Part 2. Creating components/templates to render the same message

Now lets add some folders and other files for project to build it. First just a file.

In the index.js file, the line already added is

import Vue from ‘vue’:

Vue is the main class of the framework

We are now going to add the new root component and the line

import App from ‘./App’: App is the root component of out application

So:

Create a blank file called “App.vue” in the project folder

In “App.vue” enter the following

Now go back to index.js file and make the following adjustments:

At the top add:

import App from “./App”;

Then just change the “render” line in the new Vue instance further down to:

render: h => h(App)

That’s it, all we did was just put the view and message in to an external component file which is now the root component and rendered that instead. You should get the same message inside h2 tags as before.

The next post will take it a step further and build out the app, ready to try some http requests (or not, as the case may be!)

Clone the code from Github if stuck.

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

Just clone and run

$ yarn
$ npm start

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 *