More Related Content
What's hot
What's hot (20)
Similar to Drupal point of vue
Similar to Drupal point of vue (20)
Recently uploaded
Recently uploaded (20)
Drupal point of vue
- 1. Drupal point of Vue Drupal + Vue + GraphQL
- 2. How to decouple Drupal with VueJS and keep your project scalable.
- 3. David Ličen Freelance Front-End Developer Twitter: @davision Gthub: github.com/davision Blog: davidlicen.com
- 4. point of Vue Short introduction to VueJS Framework 1.
- 5. The Founder Evan You • Previously worked as a Creative Technologist at Google • Core Dev at Meteor • From 2016 working full-time on Vue.JS framework. —> patreon.com/evanyou
- 6. History • Started in late 2013 • First release Feb. 2014 (v0.6) • v1.0.0 Evangelion Oct. 2015 • Latest release v2.5.3
- 8. Today (on 14.11.2017) vs. Angular vs. React
- 10. Who is using it? • Behance & Adobe portfolio the leading online platform for showcasing • GitLab integrated solution for the entire software development lifecycle. • Weex • Baidu Chinese search engine • chess.com #1 destination for online chess. • Codeship Continuous Integration Platform • Livestorm all-in-one web-based webinar solution
- 11. But why Vue? Source: The state of Vue 2017
- 12. Code examples The syntax 2. * Relative to space and time
- 13. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue.js</title> <script src="vue.js"></script> </head> <body> <div id="selector"> <h1>{{ message }}</h1> </div> </body> </html> // Define a plain JSON // object to hold the data let data = { message: "Hello" }; // Instantiate Vue on an element new Vue ({ el: "#selector", data: data }) // Works since getters/setters // are now proxied data.message = "Hi";
- 14. How directives looks like v-bind <!-- full syntax --> <a v-bind:href="url"></a> <!-- shorthand --> <a :href="url"></a> v-on <!-- full syntax --> <a v-on:click="doSomething"></a> <!-- shorthand --> <a @click="doSomething"></a>
- 15. <div :class="{ 'active': isActive, 'text-danger': HasError } "> </div> data: { isActive: true, hasError: false } Binding HTML Classes
- 16. <div id="events"> <button @click=“counter += 1”> Add +1</button> <p>You clicked {{ counter }}</p> <button @click=“say(‘what')"> Say what</button> </div> new Vue ({ el: '#events', data: { counter: 0 }, methods: { say: function (message) { alert(message) } } }) Event handling
- 17. <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> Conditional Rendering
- 18. <ul id=“list"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> new Vue({ el: '#list', data: { parentMessage: ‘Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) Loops
- 19. <!-- the click event's propagation will be stopped --> <a @click.stop=“oThis"></a> <!-- the submit event will no longer reload the page --> <form @submit.prevent=“onSubmit"></form> <!-- modifiers can be chained --> <a @click.stop.prevent="doThat"></a> <!-- also available .tab, .delete, .esc, .space, ...--> <input @keyup.enter="submit"> Event & Key Modifiers
- 21. Introducing Nuxt.js A minimalist framework for creating universal server side rendered (SSR) applications 3.
- 22. Highlights • Shares an idea from the Next.js • Similar to Ember tries to pack essential set of tools • UI rendering as main scope (abstracting away the client/server distribution)
- 23. What’s in the box? • Vue 2 • Vue-Router • Vuex (included only when using the store option) • Vue-Meta A total of only 28kb min+gzip (31kb with Vuex)
- 24. Installation using vue-cli vue init nuxt/starter <project-name>
- 25. pages/index.vue <template> <h1>Hello {{ name }}!</h1> </template> <script> export default { data () { return { name: 'drupalistas!' } } } </script>
- 26. Routing as standard pages/ is the main API Nuxt.js automatically generates the vue-router configuration according to your file tree of *.vue files inside the /pages directory
- 27. pages/ --| index.vue ⟶ / --| about.vue ⟶ /about --| contact.vue ⟶ /contact
- 28. Dynamic Routes define a .vue file OR a directory prefixed by an _underscore.
- 29. pages/ --| users/ -----| _id.vue Dynamic Routes
- 30. { "routes": [{ "name": "users-id", "path": "/users/:id?", "component": "pages/users/_id.vue" }] }
- 31. Deployment
- 32. npm run build npm run start Server Deployment
- 33. npm run generate Serverless Deployment
- 34. .nuxt pages/ --| index.vue ⟶ /index.html --| about.vue ⟶ /about/index.html --| contact.vue ⟶ /contact/index.html
- 35. The Drupal part Connecting the dots with GraphQL 4.
- 36. • A query language for API • Fewer roundtrips to the server • Get many resources in a single request • Typesafe client/server contract GraphQL in a nutshell
- 37. { nodeQuery (limit:10, filter:{type:"article"}) { entities { title: entityLabel uid: entityUuid created: entityCreated url: entityUrl { path } ...on NodeArticle { body{summary} fieldImage { derivative(style:medium) { url } } fieldTags { entity{name} } } } count } }
- 39. • Drupal 8.x • youshido/graphql • drupal/graphql:3.0 • exposed API to public • CORS settings Back-end requirements
- 40. • Nuxt.JS • @nuxtjs/apollo • node graphql Front-end requirements
- 41. • Fully server side rendered, • fast, • easy maintaining, • decoupled Drupal! What we get?
- 43. Run the demo! Example blog site with Drupal & Nuxt 5.
- 44. Thank you!