@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!
