jsonapi & Vue.js

what's Vue.js

Other JavaScript framework.

Tool to create Single Page Applications.

Very popular in the laravel community.

why I like Vue.js?

• big community and growing everyday.
• great documentation.
• easy/so-so learning curve.
• Component base.
• Optional libraries, like vue-router and vuex (state management).
• you can use the library directly in the browser.
• you can compile with webpack ES6 to plain JS (5). 

Example of Post.vue component

Component

You have the ability to nest components.

the Router

the Browser tool.

vuex

A single object to manage the state of all your application, this avoid sending messages between components and make your life easier.

my Vue.js repos:

https://github.com/isramv/headless-vue-drupal-8

https://github.com/isramv/opengistElectronClient

https://github.com/isramv/c3-blog-vuejs

Vue-CLI

• npm install -g vue-cli

• vue init <template-name> <project-name>

• vue init webpack awesome-vue

• vue init simple simply-vue

  • access dir and `npm install`

Resource to learn ES6

http://babeljs.io/repl/

https://github.com/getify/You-Dont-Know-JS

Demo

Drupal

• I had to use views and jsonapi and a custom module.

• jsonapi is almost finished

https://github.com/isramv/path_rest

Plus I had to install the following:

• installed `devel`

• installed `jsonapi`

• installed `cors`

• enable cors

• cors configuration : *|http://localhost:8080

• installed `pathauto`

And create one view:

DEMO:

what's the outcome of the Experiment.

• this could work for Marketing microsites

• tons of work, maybe when rest gets more mature this kind of project would take less time.

• Invest tons of time learning JS.

Any questions you may have?

GRACIAS!