• Overview
• Phase 1 - Stock Vuejs front end
• Phase 2 - TodoMVC files
• Phase 3 - Stock Grails Rest Application
• Phase 4 - Grails Todo Rest Setup
• Phase 5 - Vue TodoMVC modifications for rest model
• Phase 6 - Use v-model axios rest wrapper. Add error checking
• Phase 7 - vue-router
• Phase 8 - Vanilla Store
• Phase 9 - Vuex Store
• Reference

Overview

This is a project I used to attemp to learn the basics of Vue. I consider one of those neccesarry basics to be how to communicate using a rest api with Grails. I takes the Vue.js TodoMVC example and modifies it to use a Grails app to store the data. TodoMVC example initially taken from the poc site http://todomvc.com/ bubt then ended up using this one as a basis for the code https://vuejs.org/v2/examples/todomvc.html Take a look at the end of this artcle for other links and projects I used as examples and tutorials.

Phase 1 - Stock Vuejs front end

https://github.com/basejump/grails-vue-todomvc/tree/Phase1-vue-init-webpack

Install the vue-cli and create a template

$ vue init webpack vue-app

  This will install Vue 2.x version of the template.

? Project name vue-app
? Project description Vue.js todoMVC front end for Grails
? Author basejump <xxx@9ci.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "vue-app".

   To get started:

     cd vue-app
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

now npm run dev should work and show the todo with local browser storage

Phase 2 - TodoMVC files

see github tag phase2-todomvc-example-copy

Copy code from https://vuejs.org/v2/examples/todomvc.html according to these commits.

npm run dev and check it out

Phase 3 - Stock Grails Rest Application

github tag Phase3-Stock-Grails-Rest-App

$ grails create-app -profile rest-api -features hibernate5 grails-server

| Grails Version: 3.2.9

Phase 4 - Grails Todo Rest Setup

see this commit for a walk through of the changes made

create the Todo domain

$ grails create-domain-class Todo

import grails.rest.Resource

@Resource(uri = '/todo', namespace = '/api', formats = ["json"])
class Todo {

  String title
  Boolean completed = false
  Boolean archived = false

    static constraints = {
      title nullable: false
      completed nullable: false
      archived nullable: false
    }
}

turn on cors in the application.yml

grails:
    cors:
        enabled: true

add some rows for sanity check

class BootStrap {
    def init = { servletContext ->
        new Todo(title:"Buy beer",completed:true).save(failOnError:true,flush: true)
        new Todo(title:"Drink beer").save(failOnError:true,flush: true)
        new Todo(title:"Create Vue/Grails TodoMVC example").save(failOnError:true,flush: true)
    }
...

grails run-app and sanity check it with curl

$ curl -i -X GET -H "Content-Type: application/json"  localhost:8080/todo
HTTP/1.1 200
X-Application-Context: application:development
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Sun, 07 May 2017 06:01:57 GMT

[{"id":1,"archived":false,"completed":false,"title":"Buy beer"},{"id":2,"archived":false,"completed":false,"title":"Drink beer"}]

Phase 5 - Vue TodoMVC modifications for rest model

see this commit for changes

1. npm install axios --save modify package.json per example and run npm install

2. modify vue-app/config/index.js to change port to 8090 so it doesn't conflict with grails

3. create new src/todoRestApi.js for communication with grails. See file.

4. modify src/main.js to use the new todoModel.js instead of the local storage todoStorage from original example

5. Make minor tweak to the complete check box to use even for save

6. grails run-app under the grail-server dir. In another shell window cd to vue-app and run 'npm run dev'

Phase 6 - Use v-model axios rest wrapper. Add error checking

see this commit for changes

vmodel is a light weight wrapper around axios that allows you to use it more like ngResource and will even look somewhat similiar to Gorm/Grails activerecord way of working with items. While it says its for Vue, vue is not required and axiosis all thats needed and since its promise based API as well.

1. npm install v-model --save or modify package.json per example and run npm install

2. added todoModel.js to replace the axios based todoRestApi from phase 5

3. modified main.js to use todoModel and the vmodel model based methods

4. Add some error checking with catch and a div in index.html to diplay errors

5. Modify the Todo domain in grails so we can simulate an error by creaating an item with 'xxx'

6. grails run-app under the grail-server dir. In another shell window cd to vue-app and run 'npm run dev'

Try creating a todo with xxx as the title or modifying an existing one.

Phase 7 - vue-router

see this commit for relevant changes.

vue-router provide route and url view mapping. We were taking the url and parsing it with function onHashChange () and window.addEventListener('hashchange', onHashChange). We have <a> links to change the url for the filters on (all,active,completed). The event listener bascially took the url when it changed from http://localhost:8090/#/ to http://localhost:8090/#/completed and parse off the 'completed' part which is used to then propogate a refilter by setting this.visibility. vue-router is the stadard way of dealing with what to do when the url changes. Should already be installed.

1. Refactor index.html to use router-link

2. Update main.js per commits to add the router. The docs were light on this as most examples talked about how to tie the routes to the componenets to show. Turns out its optional and we can use the $router var that get injected into the Vue.

Phase 8 - Vanilla Store

See this branch for working example

• using yarn now, so intall yarn and just run that. must faster with caching.
• abstract out a generic store

Phase 9 - Vuex Store

See this [branch](https://github.com/basejump/grails-vuejs-todomvc-example/tree/vuex-store for working example

npm -S install vuex

working with both local and rest storage

Inspiration Articles/Docs

• vuex docs read through completly
• state changes ans 2-way databinding idea with vuex
• a good overview that includes some rest examples here
• Learn Vuex by Building a Notes App

Inspiration Projects and Examples

• The vuex example in the main source
• another vuex with JSX example https://github.com/codingcampbell/todomvc-vue
• https://github.com/christianmalek/vuex-rest-api
• complicated project with modules (in chinese) https://github.com/jackhutu/jackblog-vue/tree/master/src/vuex
• old but good examples https://github.com/pablohpsilva/Goal

Reference

examples TodoMVC inspiration

super simple https://github.com/addyosmani/vue-cli-todomvc older but has components examples and test examples https://github.com/allenmyao/vuejs-todomvc/tree/master/src vuex example with JSX, also shows SCSS style use https://github.com/codingcampbell/todomvc-vue

Admin Dashobards

front end comparison https://docs.google.com/spreadsheets/d/13WhGNOu9S207TmhkL4xhCHV0tlDg-rCzR0VeaspS8QQ/edit#gid=541415243 https://quasar-admin.firebaseapp.com/#/ https://github.com/prograhammer/example-vue-project

Testing

https://www.coding123.org/mock-vuex-in-vue-unit-tests/ https://alligator.io/vuejs/testing-vuex-vue/

App Structure basis

https://github.com/Plortinus/vue-multiple-pages Nuxt.js https://github.com/prograhammer/example-vue-project

Tutorials

http://matthiashager.com/complete-vuejs-application-tutorial