Introduction to Vue 3

Visual Studio Code Snippets & Highlighting

Introduction to Vue 3

Check out a free preview of the full Introduction to Vue 3 course

The "Visual Studio Code Snippets & Highlighting" Lesson is part of the full, Introduction to Vue 3 course featured in this preview video. Here's what you'd learn in this lesson:

Sarah explains that it is best practice to use snippets in editors that are specific to Vue to be able to read and visualize code better, and describes the Vetur extension which provides highlighting, snippets, and formatting to Vue in VSCode.


Transcript from the "Visual Studio Code Snippets & Highlighting" Lesson

>> So, you'll start off with an app file and a component. This is really nice because then you get to see how these files and imports and exports might work. So Vue kinda sets that up for you directly with the CLI. Let's go over that Vue. We went over this Vue file extension for a moment.

And I also mentioned that We're working within vscode. I highly suggest you get Vetur for vscode. Vetur will give you syntax highlighting within vscode for that .vue component. I created some snippets, there are other snippets out there that are more based off of the API. I wrote these snippets to be what you need, based on the boilerplate that you typically write.

So, and you might have noticed for that component, when we imported and exported, I made some default so that you can type multiple things at once and it kind of autofills a bunch of them at once, so you can move pretty quickly. So I also have an article on how to globally import styles, and scripts, and things like that.

So, this is where you can access that file. And again, that style scoped is really just going to be for anything that's particular styles for that component. So, it really allows us easily to scope the styles for the component and only this component. You may, if you didn't, at first add in SCSS or SASS in your Vue CLI while you are building everything.

No worries, you can do yarn add or NPMI node-sass, sass-loader, and then you can use lang= scss. And it will build properly. So if you ever find an error where it's like sass, not found and bla bla bla bla bla, just run this command, and you'll be golden.

Let's go look over here, we have a published app. Let's click on this link. And here is our stuff, live online. And I can even go back here, say Site Settings, Change the site name to setup1. I'm not sure if that will be taken or not. Is it taken?

It's not, cool. And then we click setup1. Now you can all go to, and you can see that thing that used to be a code pen deployed online pretty simply. So that's pretty cool. Awesome. So this is a good way of getting applications from one state to a full other state.

We can create full applications and get them online really quickly with Vue CLI.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now