VueJS CRUD - Instantiate Application

The main.js is the import file for webpack so this is the file that we need to bootstrap the application from. First we need to import Vue which is simply done by using

import Vue from 'vue'

This is because Vue has been loaded as a dependency by using NPM means we can simply import it. Then we need to load in VueRouter and VueResource.

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import VueResource from 'vue-resource';
Vue.use(VueResource);

VueJS needs to be mounted to an element for which we're using #app created in the previous single page HTML tutorial. This app element can use a single Vue component to add the specific functionality so we're going to load in the App.vue component too.

import App from './App.vue'

Creating The Application Routes

The application is going to have the following pages - All products

• Create product
• Edit product
• Delete product

Each of these pages will have their own single file VueJS component. We load in these components by using the require() function and tell Vue router to use this component on a specific routes.

<br></br>
import Vue from 'vue'
<br></br><br></br>
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import VueResource from 'vue-resource';
Vue.use(VueResource);
<br></br><br></br>
import App from './App.vue'
<br></br>
const AllProducts = require('./assets/js/components/all-products.vue');
const CreateProduct = require('./assets/js/components/create-product.vue');
const EditProduct = require('./assets/js/components/edit-product.vue');
const DeleteProduct = require('./assets/js/components/delete-product.vue');

const routes = [
    {
        name: 'all_products',
        path: '/',
        component: AllProducts
    },
    {
        name: 'create_product',
        path: '/products/create',
        component: CreateProduct
    },
    {
        name: 'edit_product',
        path: '/products/edit/:id',
        component: EditProduct
    },
    {
        name: 'delete_product',
        path: '/products/delete/:id',
        component: DeleteProduct
    }
];
var router = new VueRouter({ routes: routes, mode: 'history' });
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

App.vue

The App.vue component file is going to be mounted to the HTML element of

<div id="app">

</div>

This is started on the single page HTML file. When Vue starts it will load in this App.vue file which consists of the router-link tag and a container div. We've wrapped a transition tag around the router-view tag, this allows us to add an animation to the router changes, for this we're using fade animation to fade the router changes in and out.

<template>
    <div class="container">
        <div id="page">
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>

<script>
    export default{
        data(){
            return{

            }
        }
    }
</script>