A presentation at Vue Montreal Meetup by Debbie O'Brien
Full Static with Nuxt
Debbie O’Brien Head of Learning and Developer Advocate at NuxtJS Writer @Ultimate Courses @Vue School WhyTeacher Nuxt? Organiser @MallorcaJS, Vue Spain Debbie O’Brien @debs_obrien
Nuxt Benefits Automatic Components Vue components in Markdown Live preview in static mode Regenerate only your content debs_obrien
Why Static? No server: cheaper, safer Better offline support Better performance Reduces Carbon footprint debs_obrien
But Static is very Static Or is it? debs_obrien
Is static really static? debs_obrien
API’s Forms CMS Auth e-commerce debs_obrien
Headless CMS Contentful CraftCMS Storyblok Sanity Wordpress debs_obrien
Content Module Add .md files in a content folder Fetch your content with queries (where, only, sortBy) Vue components in your .md files Full text search Previous and Next debs_obrien
Content Module debs_obrien
Nuxt Crawler Dynamic routes are automatically generated debs_obrien
Not just for blogs debs_obrien
Data debs_obrien
debs_obrien
Hasura show web of hasura debs_obrien
Add a new table show hasura table debs_obrien
Browse, Modify, Delete debs_obrien
GraphQL Endpoint show the endpoint debs_obrien
Create a Plugin export default function ({ $http }, inject) { const $hasura = $http.create({ prefixUrl: ‘https://debbie-codes.herokuapp.com/v1/graphql’ }) } inject(‘hasura’, $hasura.$post.bind($hasura, ”)) debs_obrien
Call the GraphQL API async asyncData ({ app }) { const { data } = await app.$hasura({ query: print(QUERY) }) return { conferences: data.conferences } }, debs_obrien
GraphQL Playground debs_obrien
Add our Query import gql from ‘graphql-tag’ import { print } from ‘graphql/language/printer’ const QUERY = gql` query { conferences(order_by: { date: desc }) { date country name … debs_obrien
Call the Static Folder debs_obrien
Preview Changes debs_obrien
Preview Changes debs_obrien
Generate on Update debs_obrien
Create your trigger debs_obrien
Netlify Build Hooks Generate on Update debs_obrien
Add the URL to Hasura debs_obrien
Netlify Deploys image of deploy debs_obrien
Nuxt Static Module Call the API on page change Call the payload on page change debs_obrien
Nuxt Static Module You don’t have to expose your API to the public Decide when to publish new content from your API by re-generating your content only Fully static is much faster API calls have latency - always takes longer Payload files are cached and offline support with PWA module debs_obrien
Convert to a static site target: ‘static’, nuxt build && nuxt export debs_obrien
SPA inside a Static site generate: { fallback: ‘404.html’, // for netlify exclude: [/booking/] } debs_obrien
Why Static Sites debs_obrien
Why Static? No server: cheaper, safer Better offline support Better performance Reduces Carbon footprint debs_obrien
Think Static debs_obrien
Thank you Debbie O’Brien Head of Learning and Developer Advocate Open Source Contributor https://github.com/debs-obrien/nuxt-boilerplate-project debs_obrien
Static sites have many benefits from costs to performance and even reducing the carbon footprint. And with the new static module from Nuxt static is going to a whole new level. Static sites are the future and they can used for more than just blogs.
Here’s what was said about this presentation on Twitter.
