• 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

Overview

Takes the Vue.js TodoMVC example and modifies it to use a Grails app to store the data. TodoMVC examples from the poc site http://todomvc.com/ We use this one as a basis for the code https://vuejs.org/v2/examples/todomvc.html

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 <[email protected]>
? 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 axios is all thats needed and since its Promise based API it will uses bluebird 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.