Nuxt.js

Nuxt.js, built on top of Vue.js as a meta-framework, allows for highly extensible, complex, and fast universal web applications. This presentation will give a short introduction to Nuxt.js and then look at a few practical use cases you can apply to your personal projects all the way to production code. All of the familiar Vue with supercharged features out of the box: Webpack/Babel, hot reloading, universal apps, custom layouts, middleware, and code splitting. Better yet nuxt has a very active open source community with endless extensibility.

Transcript

1. Nuxt.js Building fast universal web applications with Vue Jared Potter - Lead Software Engineer
2. Slides and Code Available (also available at end) Slides: https://goo.gl/J1yRnh Code: https://github.com/JaredPotter/ nuxt.js-Demos
3. Who Am I - Jared Potter
4. Work Startup Life - Content Creator Platform Stack • Nuxt.js (spa) • Vue.js • CSS Grid / Flexbox • Firebase • GraphQL + Apollo Server 2.0 • Zype (video service provider + DRM)
5. Play • Hobbies ◦ Fitness ◦ (modern) Board Games ◦ Personal Software Projects
6. Fitness • Hiking • Yoga • Gym • Skiing (learning)
7. (modern) Board Games
8. Personal Software Projects • “But Does it Order Pizza” ◦ Amazon Dash Button • Automated Crypto Trading • Video Downloaders/Rippers • Security / Privacy (tinfoil hat)
9. Talk Expectations What this talk isn’t • Step-by-Step Tutorial • Not a reason to rewrite your entire production app What this talk is • High Level Overview of Nuxt and its features • Few demos showing off said features • Gotchas with working with Nuxt.js • Questions are welcome anytime
10. • Nuxt is known as a “meta-framework” • “out of the box” • One primarily use is for its universal app feature (SSR/SPA) ◦ Also great for normal Vue SPA development too What is Nuxt?
11. Nuxt Features • All Vue Goodies • Automatic ES6/ES7 Transpilation and Bundling (with Webpack and Babel) ◦ Configurable with a nuxt.config.js file (used in place of webpack.config.js) • Hot Code Reloading (faster development)
12. Nuxt Features - Cont • Universal Web App ◦ Server-side rendering ◦ Single Page App ◦ Static Generated • Custom layouts with the layouts/ directory • Middleware (example: authentication check) • Small (57-60kB)
13. Universal Web Application 01 Single Page App (SPA) 02 Server Side Rendering (SSR) 03 Static Generation (pre-rendered)
14. 01 - SPA • Pros • Cons • When to Use
15. 02 - SSR • Pros • Cons • Before choosing to use SSR… • Only need some SEO... ◦ Prerender-spa-plugin (https://github.com/chrisvfritz/prere nder-spa-plugin)
16. 03 - Static Site Generation • Pros • Cons • There’s always fine-tuning of caching assets, static markup
17. • npx create-nuxt-app my-first-nuxt-project ◦ npx is shipped with NPM 5.2.0 (or simply npm install it) Nuxt - Getting Started - Boilerplate
18. Nuxt - Getting Started - Boilerplate - Cont
19. Nuxt - Getting Started - Boilerplate - Cont
20. Project Structure
21. Nuxt Routing • Routing throughout the application is performed through special element • <nuxt-link> ▪ Renders out <a href=””>
22. Nuxt Routing - Cont <nuxt-link to="/members">HOME</nuxt-link> <nuxt-link to="/members/videos">HD VIDEOS</nuxt-link> <nuxt-link to="/members/photos">EXCLUSIVE PHOTOS</nuxt-link> <nuxt-link to="/blog">Blog</nuxt-link> <nuxt-link to="/members/favorites">Favorites</nuxt-link>
23. Nuxt Layouts • Specify multiple layouts for different pages of your web application • Component use across site ◦ Navigation ◦ Footer ◦ Modals • Override component styles
24. Nuxt Layouts - Cont <template> <div> <Navigation/> <nuxt/> <AppModal/> </div> </template>
25. nuxt.config.json • Configuration for all things nuxt • Replaces webpack.config.json ◦ Webpack build object • Specify .env environment files • Static CSS / JS files to include as part of the HTML head • Plugins to load before mounting the app • Nuxt modules ◦ Super powerful community create modules
26. Nuxt / Vue Community • Nuxt Modules • Vue 3rd Party Component Wrappers ◦ SSR Support • https://github.com /nuxt-community
27. Demos
28. Career Opportunity (shameless plug) • Highly motivated mid-level javascript engineer. ◦ 1-3 years • Skills ◦ Web Development ▪ HTML5 API ▪ CSS/SCSS ▪ CSS Grid ▪ Flexbox ▪ JavaScript ES5/ES6 • Async / await • Promises • Node.js • Fast paced learning and building environment (career growth) • Work remotely with flexible schedule • Desire to grow with a company for couple of years ◦ No job hoppers please • Competitive salary now; benefits later
29. Thank You!
30. Resources • https://nuxtjs.org/guide/ • https://nuxtjs.org/guide/installation/ • https://ssr.vuejs.org/guide/universal.html • https://medium.com/vue-mastery/10-reasons-to-use-nuxt-j s-for-your-next-web-application-522397c9366b • https://medium.com/a-man-with-no-server/static-site-gen erators-nuxt-js-2fa9782d27c8 • https://www.openmymind.net/2012/5/30/Client-Side-vs-Ser ver-Side-Rendering/ • https://codeburst.io/when-to-use-server-side-rendering-ssr -in-vue-js-projects-697bd925d57b • https://nuxtjs.org/examples/middleware/
31. Questions? Slides: https://goo.gl/J1yRnh Code: https://github.com/JaredPotter/ nuxt.js-Demos Slides and Code Contact + Feedback • Email: jared@calidicreative.com • https://twitter.com/jaredpotter