Alex Kyriakidis
Author - Educator - Consultant
vueschool.io
@vueschool_io
Alex
Kyriakidis
Author of the first Vue.js book (2016)
Vue.js Contributor
Founder @ Vue School
Enterprise Consultant
#1 Training Platform for Vue.js
750+ Video Lessons
140,000 users
Alex Kyriakidis
Daniel Kelly
Debbie O'Brien
Maria Lamardo
Roman Kuba
Filip Rakowski
Lydia Hallie
Rolf Haug
Popular
Vue.js Masterclass
Workshops
Workshops
Workshops on Virtual Classsroom
Vue Corporate Training
NEW
📺
Vue Video
Courses
👨🏫
Live Workshops
💬
Bi-weekly Support
Sessions
🧑🔧
Database for hiring
Vue devs
Vue Corporate Training
Ultimate Vue Bundle
- All Video Courses
- Live Workshops
- Bi-weekly support sessions
- Database for hiring Vue devs
Interested? Checkout the website or talk to our team at the booth at the conference
NEW
Vue Corporate Training
NEW
📺
Vue Video
Courses
👨🏫
Live
Workshops
💬
Bi-weekly
Support
Sessions
🧑🔧
Hiring
Database
Interested? Checkout the website or talk to our team at the booth at the conference
How ite Changes the Game for Vue and Web Development
Outline
- What is Vite
- Why it's so great
- How Vite works
- How to use Vite with Vue or React
- Vite Ecosystem
- Frequently Asked Questions
Interested in the technical insights?
What's Vite?
as of 2022
Vite is the officially recommended build tool for Vue.js apps
Vite is a new frontend build tool that significantly improves the frontend development experience 🏎
What's Vite?
Vite's Goal?
Vite's Goal?
Make developers more productive.
By making developers happier.
By making their tools faster!
Evan You
What is Vite??
1.
Rollup
1. Vite's Dev Server 🏎
Think of Vite's dev server as vue-cli. But way faster.
Vite's Dev Server 🏎
Leverages browser's native ES modules
Vite's Dev Server 🏎
-
supporting bare imports
-
hot module replacement (HMR)
-
tools like typescript
Vite's Dev Server 🏎
utilises ESBuild
written in Go and compiles to native code
uses parallelism heavily
Vite's Dev Server 🏎
large JavaScript codebase
As application grows 📈 dev server becomes slower 📉
Solves the common enterprise problem 🏆
Vite's Dev Server 🏎
Solves the common enterprise problem 🏆
Solves the common enterprise problem 🏆
2. Vite's Build Command 🏭
Vite's Build Command 🏭
Bundling takes place using rollup
Why rollup?
Vite's Build Command 🏭
building for production takes longer than dev
way faster than traditional webpack/vue-cli 🏎
Vite's Build Command 🏭
Opt-in Legacy Browser Support
with @vitejs/plugin-legacy
Vite's Build Command 🏭
✅ ✅ ✅
Vite's Build Command 🏭
-
Super fast development experience
-
Great bundle output using Rollup when building for production
👌
Vite Summary
Is Vite made for Vue? 👀
NO
Vite is Framework Agnostic
🤘🏾
Vite is Framework Agnostic 🤘🏾
A blazing fast dev environment for:
Vue
React
Preact
Svelte
and more...
Vite is Framework Agnostic 🤘🏾
I will show you
Vite React App ⚡️
Vite x Quasar ⚡️
Vite is 10x faster than Vue CLI ✨
Vite Stats
- 1,000,000 weekly npm downloads
- 40,000 stars on GitHub
- 25,000 followers on Twitter @vite_js
- 8,500 members on Discord
- And more than 500 contributors!
So you want to migrate from Vue CLI to Vite? 🤨
From Vue CLI to Vite ⚡️
Simple Migration Process 🧚♂️
Free Tutorial on Vue School 🌟
Advanced Vite Course
Vite is also capable of Server Side Rendering and Static Site Generation
Static Site Generator built on top of Vite
Vitepress
WIP
Great for documentation and blogs
Vitepress
WIP
Ecosystem
Lots of Vite powered apps ands tools make developer's experience better
Vitepress
Like VuePress but lighter and faster ⚡️
Vitepress
WIP
Can be used in any JavaScript project
Not coupled to Vite projects
Vitepress
WIP
Live Examples:
Vitepress
WIP
Vitest
Vitest
A blazing fast unit-test framework
powered by Vite ⚡️
Histoire
A new way to write stories
Histoire
FAQ
Is Vite ready for production?
Is Vite ready for production?
It is 🎉
Vite stable released on Feb 2021
Does Vite replace vue-cli?
Does Vite replace vue-cli?
Yes! vue-cli is currently in maintenance mode
How about Nuxt?
How about Nuxt?
How about Nuxt?
How about Nuxt?
How About TypeScript?
How About TypeScript?
TypeScript runs 20x - 30x faster in dev with Vite
Do I need to learn Vue from scratch?
Do I need to learn Vue from scratch?
NO
Do I need to rebuild my Vue CLI app from scratch?
Do I need to rebuild my Vue CLI app from scratch?
(just migrate)
NO
How about test runners?
How about test runners?
Various solutions, include:
- vite-jest
- cypress
- ✨ Vitest ✨
Why you pronounce Vite Veet and not Vight?
Why you pronounce Vite Veet and not Vight?
Vite (/vit/) means fast / rapid in French 🇫🇷
Why you pronounce Vite Veet and not Vight?
Where can I find Vite jobs or Vite developers? 👷♀️👨🔧
Vue.js Hiring App
Try it free at vueschool.io/hiring
Where can I find Vite jobs or Vite devs?
Vue.js Hiring App
Criteria
👩💻👩🏿💻🧑💻
👨🏻💻👨🏾💻
🧑🏽💻
Best Fit
Developers
Other
🧓 years of experience
🌍 location
🤖 fullstack
Skills
Vuetify
Vuex
TypeScript
...
Try it free at vueschool.io/hiring
Alex Kyriakidis
.io
Upcoming Vue Events 📆
- 👨🏫 June 8th
- Workshop: State Management in Vue.js with Pinia
- Location: Miami 🏖 | vueconf.us
- ⚔️ July 13 - 14th
- Hands-on Event: Vue.js Forge
- Location: Online 🌎 | vuejsforge.com
-
👨🏫 July 21st
- Workshop: Vue 3 Composition API
- Location: Online 🌎 | vuejsforge.com/workshops/vue-composition-api
Vue.js Team Solutions ⚡️
- Most comprehensive Vue Video library
- Intensive Workshops
- Bi-weekly support sessions
- Database for hiring Vue devs
Grab a FREE limited edition Vue School t-shirt
Visit our Booth 🤗
Thank You 🙏
How Vite changes the game for Vue and Web development
By Alex Kyriakidis
