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:

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

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!

whoami

Israel Morales

Drupal Developer @ Chapter Three

jsonapi & Vue.js

By Israel Morales

jsonapi & Vue.js

  • 2,131