ScreenshotMaker with Vue.js – First look at Vue.js (HTTP and simple component)

Currently everybody is focused on most trendy JS frameworks like Angular 2 and React. This giants are taking the most of Front End market. Ive heard a little bit about Vue.js but I gave it a small chance.

Vue.js CLI

Vue.js comes with CLI so it is easier to deal with it.
The official website of CLI project: https://github.com/vuejs/vue-cli.

To install it on MAC you will need to run the command:

sudo npm install -g vue-cli

To create a project Ive used webpack template:

vue init webpack my-project

It create for me a simple structure and the next instructions were listed:

Vue.js view after initialization of project

Install Vue.js dev tools

For easier and better work with Vue.js it is recommended to use Vue dev tools.
Official repository of Vue.js dev tools: https://github.com/vuejs/vue-devtools
To download it use this link: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

PHPStorm/WEBStorm and Vue.js

To deal with .vue files it will be good to install a plugin https://plugins.jetbrains.com/plugin/8057?pr=phpStorm

Connect with an API

My API test is working on Node and serves 2 options:
– list screenshots.
– make a screenshots

both are GET methods.

Lets start with getting list from server.

Component which invokes GET on server

Ive used a structure which is done by VUE CLI and added functionality to component which was created by it. To start working with HTTP requests you need to install a package VueResource.

sudo npm i vue-resource --save

Than edit main.js:

import Vue from 'vue';
import VueResource from 'vue-resource';
import App from './App';

Vue.use(VueResource);
Vue.http.options.emulateJSON = true;

var vueApp = new Vue({
    el: 'body',
    components: {App},
})

Additionally the App.vue file which describes App component looks like this:





The most important for us fragments of code are:

  • Directive which will render our list:
  • {{ item }}
    • Method which fetches data from server:
    fetchFiles: function() {
          Vue.http.get('http://localhost:8888/list').then((response) => {
            var res = JSON.parse(response.body);
            this.$set('items', res.files);
    
          }, (response) => {
            console.log(response);
          });
        }

    This version of code is available here:
    https://github.com/fedojo/screenshot-maker-fe-vue/commit/1c5fabacc3ed362abe995cf7da3ddfa8f7d1defa

    Router

    To start working with router you will need to install new package available under link https://github.com/vuejs/vue-router.
    Official documentation is available here: http://router.vuejs.org/

    Lets install the package:

    npm install vue-router

    Router in depth

    To start working with router we need to change a little bit our structure. Our aproach is to create an app with two links:
    – list – with list of screenshots
    – makescreenshot – with simple form which creates a screenshot

    Firstly we need to create components for both views.

    Structure:
    |- componenents
    ||- List.vue
    ||- MakeScreenshot.vue
    |- main.js

    File main.js:

    import Vue from 'vue';
    import VueResource from 'vue-resource';
    import VueRouter from 'vue-router';
    
    // Components
    import List from './components/List';
    import MakeScreenshot from './components/MakeScreenshot';
    
    // HTTP configuration
    Vue.use(VueResource);
    Vue.http.options.emulateJSON = true;
    
    
    var App = Vue.extend({
        template: `
            

    Screenshot App!

    Go to List Make screenshot

    ` }); // Router configuration Vue.use(VueRouter); var router = new VueRouter(); router.map({ '/list': { component: List }, '/makescreenshot': { component: MakeScreenshot } }); // Start app router.start(App, 'app');

    List.vue

    
    
    

    Summary

    The basics of Vue.js are rather simple to get. The routing and HTTP request could be included in the core package. But maybe it is better to keep it out of core and make a lib smaller. After this short project I think that Vue.js is very good and small framework and easy to learn. Looks at some points pretty similar to Angular 1.

    You can check the sources of project here:
    https://github.com/fedojo/screenshot-maker-fe-vue

    Please follow and like us:
    error

    Published by Piotr Sikora

    Piotr Sikora is Front End Team Manager @ Sourceful. MeetJS Kielce Committee member. JavaScript enthusiast. With passion to MTB (http://ckbikers.com)

    Leave a comment

    Your email address will not be published. Required fields are marked *