// Tutorial //

Customize Poi in a Vue.js App

Published on January 1, 2018
Default avatar
By Alex Jover Morales
Developer and author at DigitalOcean.
Customize Poi in a Vue.js App

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Setting up a Vue.js app with Poi is quite an easy and pleasant experience, a lot of magic going on. But what if we need to customize it?

Poi makes it easy and exposes different ways to be customized.

Config File

You can create a poi.config.js in the same level as package.json which Poi will understand by convention. If you’d like, you can change the path by using the --config [path] option in the CLI.

The config file has a similar structure to Webpack’s. Some options are directly the options of a Webpack plugin.

Let’s see some common customizations we can do.

HTML output

Poi uses html-webpack-plugin under the hood. If you check out the default template, you’ll see that title and description are configurable, so you can customize those:

poi.config.js
module.exports = {
  html: {
    title: 'Coolgator',
    description: 'Cool and hungry alligator'
  }
};

You could use data from package.json, which is a common pattern:

poi.config.js
const pkg = require('./package.json');

module.exports = {
  html: {
    title: 'Coolgator',
    description: pkg.description
  }
};

However, the default template is quite limited for customization. Not to worry though, you can use your own template. Create an index.ejs in the same level as the poi.config.js file and let’s add a list of <icon>s:

index.ejs
<head>
...
  <% htmlWebpackPlugin.options.icons.forEach(function(icon) { %>
    <link rel="icon" sizes="icon.size" href="<%= icon.url %>">
  <% }); %>
...
</head>

Then add the icons property:

poi.config.js
const pkg = require('./package.json');

module.exports = {
  html: {
    title: 'Coolgator',
    description: pkg.description,
    icons: [
      {
        size: '32x32',
        url: 'http://via.placeholder.com/32x32'
      }
    ]
  }
};

Folder structure

You could customize name of the output directory:

poi.config.js
module.exports = {
  dist: 'buildy' // defaults to 'dist'
};

With filename, you can set how the files will be named. Here you can use Webpack’s [name], [hash], [id], [ext] and all the special name variables. The defaults are:

poi.config.js
module.exports = {
  filename: {
    js: '[name].[hash:8].js',
    css: 'style.css',
    images: 'assets/images/[name].[ext]',
    fonts: 'assets/fonts/[name].[ext]',
    chunk: '[id].chunk.js'
  }
};

Using staticFolder you can change the folder name used to copy the raw files to dist:

poi.config.js
module.exports = {
  staticFolder: 'assets'
};

Env variables

Within the env property, we can define our custom variables:

poi.config.js
module.exports = {
  env: {
    VERSION: '2.3'
  }
};

They become available in the code:

const version = process.env.VERSION;

And in the template:

<meta name="version" content="<%= htmlWebpackPlugin.options.env.VERSION %>" />

Autoprefixer

Use the autoprefixer to modify the settings for the PostCSS autoprefixer plugin:

poi.config.js
module.exports = {
  autoprefixer: {
    browsers: ['ie > 9', 'last 4 versions']
  }
};

Using SCSS

To use a preprocessor, you just need to install the loader and possible dependencies.

For instance, in order to import a .scss file, we need to install:

$ npm install node-sass sass-loader --save-dev

Configuration in package.json

Poi can also be customized by using the poi property in your project’s package.json file:

package.json
{
  "poi": {
    "dist": "buildy",
    "staticFolder": "assets"
  }
  ...
}

Wrapping up

Poi is easily customizable while at the same time preventing you from sinking in a sea of configuration. Here I’ve just shown the most common ones. Feel free to go to the docs to see what else you can do. But remember, it’s better to stick to conventions whenever possible.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!