Local Setup with Vite — Transcript

Transcript of the free Vue.js lesson Local Setup with Vitewatch the video lesson.

So far, we've been playing with Vue in the official playground provided by the official Vue docs. However, at some point, you'll really want to get up and going with a real local project. Let me show you how to do that in this lesson. js installed.

I've left a link to install it in the description below. All right, in order to get your project set up, you want to open up your terminal and run npm init view at three. And what this will do is this will bootstrap a project for you with Vite. If you don't know about Vite, we've got a complete course dedicated to it.

It's an awesome tool that provides an excellent, snappy, lightning-fast developer experience to help you create your projects fast. All right, I'll click Enter to proceed here. And the tool will walk me through a few setup questions. We'll call the project View Fundamentals Course.

And we don't need TypeScript or JSX. We don't need ViewWriter right now. And no for Pinion. We'll also say no to Cypress.

If you don't know what some of these are, don't worry about that right now. js ecosystem, you'll get familiar with some of these. All right, I'll skip ESLint. And we're all done.

Now we can copy and paste these three commands here in green to get our dev server up and running. And just like that, we've got a local site. Awesome. We can visit it at the URL presented here.

Cool. Now let's open up the code base in VS Code and take a quick look around. view. And this file will look somewhat similar to the code that we've been working with throughout the course.

It has a script section and a template. And in case you didn't know it, you can also include style sections in these files. view are called single file components and are beyond the scope of this course. vue, play around, try to recreate some of the things we did throughout the course.

And you'll find that it works much the same as in the playground. But now you've got Vue up and running on your local machine. If for some reason you don't care about support for script setup, then you could actually install Vue without the build step that Vite provides using a link to the CDN. This is an even faster way to get started, but you will have to use the composition API from within a setup method, which we didn't go over in this course, but you can learn about in the docs.

Or you'd have to use the options API instead. Really, though, using V to provide a build step and utilizing script setup is the way to go, in my opinion.