Introducing Vue.js 3 Vite A No-Bundle Dev Server For Vue 3 Single File Components Evan You Tutorial

0:00 Start
1:35 What Is Vite?
4:20 Create Vite App
6:43 Add A Component
8:49 Install SASS
10:10 Instal Vue Router 4
15:20 Vite Build

♡ ♡ ♡

MY COURSES -

♡ ♡ ♡

Make Sure To Check These Courses Out On Udemy! 💻

___

Links

[ramonmata]

This Vite thing seems like another good reason to get into Vue 3

[ProgramWithErik]

🚨 Check out remote.work and land your next remote job!

[caseng]

Cool, thanks, man! This means I can very quickly create an application in the dist folder and then move it to the php application. One url - one point.

[torickjdavis]

In response to the error brought up at 14:00, from what I can tell, the official vanilla JavaScript imports don't support the index.js convention from a directory name like bundlers (i.e. webpack) and Node. So, you just have to specify the file you want. So, you could have done the following:

import router from './router/index.js';

[arnauddsj-monagencecreative]

Don't know how Evan is calling it, but it should be prononced Veet :)

[newneo]

please tell me, when I do a building (vite build), all files are dropped into one dist/assets folder, is it possible to somehow set the build to split files like my dev project. This is conveniently done when I use a build in vue/cli project, all *.img -> dist/img folder, *.css -> dist/css folder, e t.c.

[dattermenum]

How does this fit in with babel and webpack exactly? They have a lot of features that vite does not. Could I hook up babel/webpack in package.json to build the production files that vite outputs and still be able to use Babel to get es5 from es7 for example or get webpack to run image optimisation, minify, obfuscate and so on but not do this step in dev and only when packaging to ship for production? This could be pretty i guess??

[alwaysgrowww]

Awesome video! I'm planning use vite to make some nice cool project!

[WorstDeveloper]

So when would I use this instead of Vue CLI?

[siamekanto]

Does anyone know how can we use Lazy Loading Routes in Vite? I have been trying to make it work since hours and seems like Lazy Loading doesn't work at all with Vite.

[malipetek]

remote.work seems to be quite good. They differentiate openings as remote or some location. Many remote jobs require some location even though they do remote.

[binhtahuu]

hello Erik. how can i add plugins ( somthing like vuetifyjs ) to use this??? pls, help :s

[nodahikaru]

Lovely. I finally knew what Vue SFC means by seeing your video.
Btw, what is the name of theme you are using in your VScode?

[emerenoo]

Hi! Can you tell me how you did this cool blue light under the functions, < > etc char

[FNXTproductionz]

This is really awesome. I am looking forward to see these features in a stable release. So I can start using it in production.

[jlayanto]

With Vite, how to integrate code coverage, unit testing and Cypress E2E testing? I know this is possible with Vue-CLI - with babel and Webpack, but the point of Vite is to not use bundler during dev. Does this mean that this is not possible with Vite?

[ckmirafss]

Woaah that was nice! Btw, Can you share what you're using to beautify your vue?

[bartekbrodzik]

How to get path in terminal to display like yours? I'm on mac

[torstendittmann]

Have the same issues with index.js. Had to append an "index" in the import after the folder containing the index.js 🙃

[botaoxyz]

I wrote the same code, but I got the error 'vue-router:1367 Uncaught ReferenceError: process is not defined', vue-router version is alpha.9