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
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
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
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>
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
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)
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
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