A presentation at Oslo Vue.js Meetup in in Oslo, Norway by Debbie O'Brien
getting started with Nuxt and static sites
Debbie O’Brien Frontend Tech Lead @Patterson Agency Mentor @OpenClassrooms Slack Moderator @Treehouse Contributor @webpack debs_obrien
Why Nuxt? Nuxt is a wrapper built on top of webpack and Vue
Why Nuxt? Why do I need a framework on top of a framework?
Why Nuxt? For SSR you can just use vue-server-renderer
Why Nuxt? Implementing it was hard
Why Nuxt? I needed dynamic pages
Why Nuxt? What do you do when you need help?
You call a Vue Core Team Member Eduardo San Martín
Why Nuxt? Why do I need a framework on top of a framework?
Why Nuxt? Because Eduardo said so
Why Nuxt? Because the Core team members of Vue are recommending Nuxt
Why should You use Nuxt?
Why Nuxt? Nuxt helps you write universal apps more simply
Why Nuxt? Code splitting of routes out of the box Dynamic pages and routes Generate static sites SEO …
Why Nuxt? Nuxt makes it easy to create Universal Apps
Universal App
Universal App A universal app is code that can execute on both client and server
SPA
SPA No page refreshes but….. Many crawlers find it difficult to parse and understand your website especially if getting your data from an api
Universal App
Universal App Preloads your application on a server sends rendered HTML to the browser for every route Improves SEO Makes loading happen faster
Universal App You get: <title> <meta> <head> <h1> <body> etc before any javascript is loaded This helps crawlers determine what’s on the page
Static Sites
Static Sites It will generate HTML for every one of your routes Routes are pre-rendered
Static Sites Page loads faster Helps search engines and social media crawlers No server needed Everything gets generated during the build phase
Static Sites Aren’t we going back in time? Back to the 90’s! Why?
Static Sites The 90’s was a cool era Especially for web development
Static Sites It’s not a 90’s static site
Static Sites When a user visits your static website, the hydration process kicks in and your application becomes a single page application.
Static Sites What’s Hydration?
Static Sites Hydration is:
Static Sites
Static Sites It makes a static site act like a SPA All the Spa benefits with all the Static site benefits
Static Sites It’s a match made in heaven
Static Sites Universal rendering without the need of a server You can host on github, netlify, Amazon S3 etc
Static Sites v SSR Site It’s faster => pre-generated static assets It’s cheaper => no server needed It’s Safer => Less prone to attacks
Static Sites Static generated / pre rendered means pre render the application once during build and serve it as a SPA
Patterson Travel Static Site
Patterson.travel A live example of a Nuxt static site
Patterson.travel The frontend team on using a Nuxt static site:
Patterson.travel The marketing team on using a nuxt static site:
Best practices: Nuxt and SEO
Best practices: Nuxt and SEO Nuxt uses vue-meta to handle the <head> element in each of your pages. There are 3 ways to set up the head element:
Best practices: Nuxt and SEO 1) Default meta tags for all your pages. You can set this in the nuxt config 2) Setting up meta tags for your pages individually by defining a head element 3) Setting up meta tags for your dynamic pages
Dynamic Routes
Dynamic Routes Dynamic routes are defined by prefixing your .vue page in the pages folder with an underscore. pages/users/_username.vue pages/blog/_id.vue pages/blog/_slug.vue
Dynamic Routes To generate dynamic routes you need to add a generate option to your nuxt.config. By default Nuxt won’t generate static files for any dynamic routes as it doesn’t know what the id/slug will be.
nuxt.config.js
Generates an index per route [nuxt] Generating… nuxt:render Rendering url / +154ms nuxt:render Rendering url /users/1 +12ms nuxt:render Rendering url /users/2 +33ms nuxt:render Rendering url /users/3 +7ms nuxt:generate Generate file: /index.html +21ms nuxt:generate Generate file: /users/1/index.html +31ms nuxt:generate Generate file: /users/2/index.html +15ms nuxt:generate Generate file: /users/3/index.html +23ms nuxt:generate HTML Files generated in 7.6s +6ms [nuxt] Generate done
Dynamic Routes Wait a Second What if I have 100 users or blog posts or I don’t know what the id or name will be. This isn’t very dynamic.
function that returns a promise
speed it up with payload
access the payload from /users/_id.vue
Nuxt Boilerplate
Nuxt Boilerplate Before you start to build: • • • • • Add your linters Set up prettier Set up your pre commit hooks Set up your meta for SEO Set up your testing
prettierrc.js
eslintrc.js
eslintrc.js
stylelint.config.js
stylelint.config.js
Add Global Sass Variables Add @nuxtjs/style-resources Share variables, mixins, functions across all style files (no @import needed) Support for SASS, LESS and Stylus
nuxt.config.js
PurgeCSS nuxt.config.js
Pre Commit Hooks: Husky
Deploying to github
nuxt.config.js
package.json
terminal
Nuxt Benefits
AsyncData Fetches data before the page is sent to the client you can “sync” your data or define data that you want rendered on the server side This is then merged with the component data
AsyncData At the moment: asyncData can only be applied to components in the pages directory.
Code Splitting Every route gets its own JavaScript file with just the code that is needed to run on that route.
Page Transitions Each page gets wrapped in a <transition> element Easily create transitions between pages
css/scss file
Layout Transitions
Page Specific Transitions
about.vue
Why Nuxt
Why Nuxt? Nuxt is easy to get started great community great documentation fantastic chat ask questions to core team members
Why Nuxt? Follow Nuxt on twitter for the latest up to date news including what companies have started to use Nuxt as their framework of choice
Learn Nuxt
Thank you debs_obrien
Did you know nuxt.js can pre render all your pages so you can easily create static sites using the Vue.js framework. That means you have a Single Page Application without the need of a server and with great SEO and that’s just a few of the benefits of using nuxt.js. In this talk I will take you through how I setup nuxt with all the extras I normally add to create a great boilerplate project configured to my liking. I will also show you how easy it is to generate static pages, create pre commit hooks and deploy.
