in VueJS Crud

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'

import VueResource from 'vue-resource';

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.

    import Vue from 'vue'
    import VueRouter from 'vue-router'

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

import App from './App.vue'

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

Subscribe To The Weekly Newsletter

Get weekly updates to your email