Use Poi to Build an Index.js with Modern JavaScript Features

Customize Poi's Default index.html Template

Configure Poi for Advanced Template Control

Build a Vue App with Poi

Customize Babel to Build a React App with Poi

Compile CSS or Sass with Poi

Use Markdown as React Components by Adding a Webpack Loader to Poi

Build and Analyze Your JavaScript Bundles with Poi

Use Poi Presets from npm to Skip Configuration

Setup PostCSS and Tailwind with Poi

Make Webpack Easy with Poi

Poi uses the Vue babel presets by default, so there is no additional install required to get up-and-running. You can even use the `.vue` file format without having to configure anything.

https://app.egghead.io/api/v1/lessons/vue-js-build-a-vue-app-with-poi/subtitles

Instructor: [00:01] Since Poi was developed by a Vue contributor, all of the defaults are essentially configured for Vue. We can import Vue from 'vue' since it's included. Then, with a new Vue instance, we can set the element to the app id and then render out.

[00:17] We'll create our render function with h and then some JSX, and say "Hello." You can see this renders out "Hello" even though the only thing I've created is this index file. I didn't have to install Vue. There are no Node modules or anything.

[00:31] I can even come into here, create a new file called app.vue, create my single-file component. We'll create a div and have some data for this as well. Export default to some object with some data on it and return an object with a message that says "Party Time." Then render this message out here.

[00:59] In my index file, I can easily import App from './app.vue'. Instead of rendering out some JSX, I can just drop my app in here, hit save, and it's "Party Time."

Build a Vue App with Poi

Share this video with your friends

Course

Make Webpack Easy with Poi