Supercharge your next Vue app with Nuxt

•

2 likes•525 views

Vue to nowy zawodnik wagi ciężkiej w świecie JS. Jak robić za jego pomocą skalowalne aplikacje frontendowe? Jakie problemy rozwiązuje Nuxt i dlaczego warto go użyć w następnym projekcie Vue? Co może pójść nie tak w live codingu podczas prezentacji? Wszystko to i więcej w jednej prezentacji!

Software

Supercharge your next Vue app with
Nuxt
Michał Bujalski

About this talk
- Vue quick recap
- What is Nuxt
- Why should I use framework?
- Main features and goodies of Nuxt
- Demo

Vue quick recap
JS library for building UI
- virtual DOM
- small (33kb minified + gzip)
- two way data binding
- directives
- extensible (plugins, mixins)

Nuxt
A Vue framework for building web applications

Nuxt - is it Next.JS for Vue?
Yes and no

Nuxt - why do I need it?
- minimal configuration
- default project structure
- extensible
- ssr out of the box
- DX

Nuxt - what’s included
- Vue 2
- vue-router
- Vuex (optional)
- Vue Server Renderer
- vue-meta

Nuxt - what’s included
● Write Vue Files (*.vue)
● Automatic Code Splitting
● Server-Side Rendering
● Powerful Routing System with Asynchronous Data
● Static File Serving
● ES6/ES7 Transpilation
● Bundling and minifying of your JS & CSS
● Managing <head> element (<title>, <meta>, etc.)
● Hot module replacement in Development
● Pre-processor: Sass, Less, Stylus, etc.
● HTTP/2 push headers ready
● Extending with Modular architecture

Nuxt - what’s included
- webpack
- babel
- linter
- test framework

Nuxt - what’s the cost?
57kB min+gzip (60kB with Vuex).

Nuxt - why do I need it?
But wait, what can Nuxt do what I can’t?

Nuxt - app structure
Layout
Page
Component
Component
Component

Nuxt - Creating a project demo
Create project

Nuxt - modes
- SSR
- SPA
- PWA (using Nuxt PWA module)
- static site generator

Nuxt - demo
Let’s build a blog
- list of blog posts
- blog post details

Nuxt - recap
- extensible
- great developer experience
- freedom of switching between app types (pwa, ssr, spa)
- configurable yet simple

What's hot

OTechs Cloud Computing Training CourseOsman Suliman

Service orchestration and metal as a service with juju and maasEduardo Castillejo Gil

Building HTTP API's with NodeJS and MongoDBdonnfelker

MongoDB IoT City Tour EINDHOVEN: Managing the Database ComplexityMongoDB

Oreilly Webcast Jun17Sean Hull

dba_lounge_Iasi: Everybody likes redisLiviu Costea

NodeJS overviewRoman Trukhin

OpenNebulaConf2017EU: Hyper converged infrastructure with OpenNebula and Ceph...OpenNebula Project

Philipp Krenn "Elasticsearch (R)Evolution — You Know, for Search…"Fwdays

Something about node basicsPhilipp Fehre

Storage based snapshots for KVM VMs in CloudStackShapeBlue

Capistrano && SystemDAleksandr Simonov

HydraChris Birchall

Cloud foundry on kubernetes상준 윤

Windows Azure Overview 20131128Jeff Chu

OpenNebulaConf2015 2.06 OpenNebula in the Wild - Ander AstudilloOpenNebula Project

Next.jsでISRNobuhiroKato5

Nightwatch.js (vodQA Shots - Pune 2017)Smriti Tuteja

Mesh cloud (road to mongoDB)Medhat Dawoud

NodeJS Concurrencypgriess

What's hot (20)

OTechs Cloud Computing Training Course

Service orchestration and metal as a service with juju and maas

Building HTTP API's with NodeJS and MongoDB

MongoDB IoT City Tour EINDHOVEN: Managing the Database Complexity

Oreilly Webcast Jun17

dba_lounge_Iasi: Everybody likes redis

NodeJS overview

OpenNebulaConf2017EU: Hyper converged infrastructure with OpenNebula and Ceph...

Philipp Krenn "Elasticsearch (R)Evolution — You Know, for Search…"

Something about node basics

Storage based snapshots for KVM VMs in CloudStack

Capistrano && SystemD

Hydra

Cloud foundry on kubernetes

Windows Azure Overview 20131128

OpenNebulaConf2015 2.06 OpenNebula in the Wild - Ander Astudillo

Next.jsでISR

Nightwatch.js (vodQA Shots - Pune 2017)

Mesh cloud (road to mongoDB)

NodeJS Concurrency

Similar to Supercharge your next Vue app with Nuxt

What’s new in Nuxeo 5.2?Nuxeo

Polymer / WebComponentsArnaud Kervern

Release 8.1 - Breakfast ParisNuxeo

nuxt-en.pdfssuser65180a

Drupalcon 2021 - Nuxt.js for drupal developersnuppla

Accelerate Development with NX Build SystemThien Ly

Serverless 프레임워크로 Nuxt 앱 배포하기Changwan Jun

NET core 2 e i fratelliAndrea Tosato

RIA front-ends: Flex, GWT integration in NuxeoNuxeo

NTT SIC marketplace slide deck at Tokyo SummitToshikazu Ichikawa

About netcore2Michel Bruchet

"The OpenVX Computer Vision and Neural Network Inference Library Standard for...Edge AI and Vision Alliance

NodejsBhushan Patil

Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)Arrow Consulting & Design

Nuxeo Roadmap 2008/06Eric Barroca

Libvirt/KVM Driver Update (Kilo)Stephen Gordon

SCM Puppet: from an intro to the scalingStanislav Osipov

Performance and Scale: Billions of request per day (DDD2019)Marcel Dempers

Server Side Rendering with Nuxt.jsJessie Barnett

Open stack networking_101_update_2014yfauser

Similar to Supercharge your next Vue app with Nuxt (20)

What’s new in Nuxeo 5.2?

Polymer / WebComponents

Release 8.1 - Breakfast Paris

nuxt-en.pdf

Drupalcon 2021 - Nuxt.js for drupal developers

Accelerate Development with NX Build System

Serverless 프레임워크로 Nuxt 앱 배포하기

NET core 2 e i fratelli

RIA front-ends: Flex, GWT integration in Nuxeo

NTT SIC marketplace slide deck at Tokyo Summit

About netcore2

"The OpenVX Computer Vision and Neural Network Inference Library Standard for...

Nodejs

Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)

Nuxeo Roadmap 2008/06

Libvirt/KVM Driver Update (Kilo)

SCM Puppet: from an intro to the scaling

Performance and Scale: Billions of request per day (DDD2019)

Server Side Rendering with Nuxt.js

Open stack networking_101_update_2014

Recently uploaded

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfkalichargn70th171

ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...Christina Lin

Optimizing AI for immediate response in Smart CCTVshikhaohhpro

Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsAlberto González Trastoy

Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...soniya singh

Der Spagat zwischen BIAS und FAIRNESS (2024)OPEN KNOWLEDGE GmbH

Exploring iOS App Development: Simplifying the ProcessEvangelist Apps https://twitter.com/EvangelistSW/

TECUNIQUE: Success Stories: IT Service providermohitmore19

Professional Resume Template for Software DevelopersVinodh Ram

Unit 1.1 Excite Part 1, class 9, cbse...aditisharan08

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...ICS

A Secure and Reliable Document Management System is Essential.docxComplianceQuest1

Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin

Engage Usergroup 2024 - The Good The Bad_The UglyFrank van der Linden

Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...stazi3110

Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq

Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...harshavardhanraghave

Project Based Learning (A.I).pptx detail explanationkaushalgiri8080

Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataBradBedford3

BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEOrtus Solutions, Corp

Recently uploaded (20)

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf

ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...

Optimizing AI for immediate response in Smart CCTV

Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications

Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...

Der Spagat zwischen BIAS und FAIRNESS (2024)

Exploring iOS App Development: Simplifying the Process

TECUNIQUE: Success Stories: IT Service provider

Professional Resume Template for Software Developers

Unit 1.1 Excite Part 1, class 9, cbse...

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...

A Secure and Reliable Document Management System is Essential.docx

Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide

Engage Usergroup 2024 - The Good The Bad_The Ugly

Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...

Salesforce Certified Field Service Consultant

Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...

Project Based Learning (A.I).pptx detail explanation

Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data

BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE

Supercharge your next Vue app with Nuxt

1. Supercharge your next Vue app with Nuxt Michał Bujalski

2. About this talk - Vue quick recap - What is Nuxt - Why should I use framework? - Main features and goodies of Nuxt - Demo

3. Vue quick recap JS library for building UI - virtual DOM - small (33kb minified + gzip) - two way data binding - directives - extensible (plugins, mixins)

9. Vue https://vuejs.org/

10. Nuxt A Vue framework for building web applications

11. Nuxt A Vue framework for building web applications

12. Nuxt - is it Next.js for Vue?

13. Nuxt - is it Next.js for Vue? Yes

14. Nuxt - is it Next.JS for Vue? Yes and no

15. Nuxt - why do I need it? - minimal configuration - default project structure - extensible - ssr out of the box - DX

16. Nuxt - what’s included - Vue 2 - vue-router - Vuex (optional) - Vue Server Renderer - vue-meta

17. Nuxt - what’s included ● Write Vue Files (*.vue) ● Automatic Code Splitting ● Server-Side Rendering ● Powerful Routing System with Asynchronous Data ● Static File Serving ● ES6/ES7 Transpilation ● Bundling and minifying of your JS & CSS ● Managing <head> element (<title>, <meta>, etc.) ● Hot module replacement in Development ● Pre-processor: Sass, Less, Stylus, etc. ● HTTP/2 push headers ready ● Extending with Modular architecture

18. Nuxt - what’s included - webpack - babel - linter - test framework

19. Nuxt - what’s the cost? 57kB min+gzip (60kB with Vuex).

20. Nuxt - why do I need it? But wait, what can Nuxt do what I can’t?

21. Nuxt - How it works

22. Nuxt - server

23. Nuxt - creating a project

24. Nuxt - creating a project

25. Nuxt - creating a project

26. Nuxt - creating a project

27. Nuxt - creating a project

28. Nuxt - creating a project

29. Nuxt - creating a project