@Akryum

1. Vue CLI

2. vue-apollo

3. SSR

Creating a project

@vue/cli

Vue CLI

Create

Develop

Build

Deploy

???

Getting Started

vue create my-app
cd ./my-app
yarn serve
yarn build
yarn global add @vue/cli

Built-in features

Webpack 4

Babel 7

Typescript

PWA

Linting

Sass

Less

Stylus

Modern mode

Multi-page

Web components

Jest

Mocha

Cypress

Nightwatch

How?

Vue CLI Plugins

Pick the features you need

Add new plugins later

Upgrade features

Plugin API

Generate & modify files

Tap into webpack config

Register new commands

275+

community plugins

That's not all...

Vue CLI

UI

Getting Started

vue ui

Integrating Apollo

vue-cli-plugin-apollo

Getting Started

vue add apollo

vue-cli-plugin-apollo

Automatic vue-apollo setup

.gql files support

Built-in Apollo Server

Apollo Engine integration

Server-Side Rendering

@akryum/vue-cli-plugin-ssr

Getting Started

vue add @akryum/ssr
entry-client.js
createApp()
app.$mount('#app')
entry-server.js
createApp()
prefetchAll()
renderToString()

How to SSR

create fake component tree
collect queries
execute queries
render the app
 with cached results

Prefetching

The Future

of vue-apollo SSR

The Problem

Rely on Vue internals

Difficult 3rd-party library support

Additional app render

The Solution

vue-server-render is already asynchronous

A new lifecycle hook: ssrPrefetch()

Wait for Promise to resolve

create component instance
execute queries
render component
continue with children

New Prefetching

Benefits

Public API

Support for all libraries

No extra app renders

Coming soon!

Silver sponsor

Guillaume Chau

@Akryum

github.com/Akryum

Thank you!

A Fullstack GraphQL App in 2 Minutes with the Vue CLI and Apollo

By Guillaume Chau

A Fullstack GraphQL App in 2 Minutes with the Vue CLI and Apollo

The new Vue CLI is now the standard build tools to create Vue.js app. With its plugin system, you can add new features like Apollo GraphQL in an instant. Only a few minutes are required to create a full-stack Vue.js and GraphQL app and then you can start creating the next killer-app!

  • 2,288
Loading comments...

More from Guillaume Chau