Summary of 4 main usage levels of Vue.js from basic to more advanced

Basic vs. Advanced

“Basic” = good for integrating Vue within existing apps using other frameworks such as Angular.js. (Great for gradually migrating legacy apps to Vue.)

“Advanced” = good for brand new web apps being built from scratch

Requirements for Usage:

• Basic: link to vue.js library script
• Advanced: Webpack or similar build tool is required in addition to vue.js library

Levels

Level 1: Directives (basic)

Very similar to a basic Angular 1 app. “Directives” are used as special attributes within HTML tags to render content, etc. (No need to use components.)

(Level 1 can be used just on its own for simple apps but would normally be combined with the other “levels”.)

Example:

<!-- In HTML: -->
<div id=”app”>
    <ul>
        <li v-for=”item in items”>{{item.text}}</li>
    </ul>
</div>

Level 2: String Components (basic)

Components are defined as a string within a JS file then used as a custom tag within HTML. (ES6 template literals can be used for nicer formatting.)

Example:

// in JS:
Vue.component('alert-component', {
    template: '<div class="alert"><p>This is an alert!</p></div>'
});

<!-- in HTML: -->
<alert-component></alert-component>

Level 3: Template Components (basic)

Components are defined using “template” tags within the HTML file where they are used. Data and methods are defined in a separate JS file. (Component templates can be referenced as an HTML partial for use within multiple page templates. Best Practice: Use dash in component tag names to follow web component practices.)

NOTE: Levels 2 & 3 are basically alternate ways of doing the same thing.

Example:

<!-- in HTML (at top outside of "#app"): -->
<template id="alert"></span>
    <div class="alert"><p>Hello!</p></div>
</template>

<div id="app">
    <alert-component></alert-component>
    other content ...
</div>

// in JS:
Vue.component('alert-component', {
    template: '#alert'
});

Level 4: Single File Components (advanced)

HTML template, JS code, and any custom styles are included in “component.vue” files for each component.

NOTE: Level 4 is also an alternate way of doing components somewhat similar to levels 2 & 3 but has extra dependencies.

Example:

<!-- in “mycomponent.vue” -->
<template>
    <div class="alert"><p>This is an alert!</p></div>
</template>

<script>
    // define methods, etc. used by component
    export default {};
</script>

<style lang="scss" scoped>
    /* scoped component styles (optional) */
</style>