Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Build a Vue App with Poi

    John LindquistJohn Lindquist
    vueVue.js
    webpackwebpack

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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."