Drupal point of vue
•
2 likes•1,041 views
With this presentation, I am showing how to easy decouple a simple Drupal blog with Nuxt framework and GraphQL. You will be first shortly introduced to Vue.JS and Nuxt platform with some code examples and in the end, you will be able to clone a Github repository with a full working example: https://github.com/davision/nuxt-graphql-drupal-blog
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
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!