So what I've discovered is that when I've worked with Vue developers both experienced and people who are just wanting to get into it. I've seen two different types of implementations of the Vue framework. I've seen Vue where it was a standalone application and we're going to build out several of those. That is where the application is a 100 percent Vue for the most part. HTML pages and some components like that but really it's just a dedicated Vue app and that is a common implementation.

But I've also seen that there are a number of projects that developers simply bring Vue in for some specific behavior. So it may be a Rails project or it might be a Laravel or C# or whatever kind of framework that you'd usually use usually kind of a basic standard MVC type framework and they want to use a view at a local level so they simply want to say that okay these pages are the pages that are going to have Vue.

I don't want the entire application to be a Vue based app and so you have those two different types of implementations and so I want to walk through both of those. And so in this first project I'm going to show you how you can bring Vue into a preexisting project and then you can have access to everything that Vue provides.

So what we're going to start with is a basic one page HTML site. It's going to allow us and if you've gone through CSS grid and front end implementation course then you might have already built out this project and so it's going to allow us to have a good looking well-designed application really just one HTML page that we're able to slide view in where it's needed. And so I think this is going to be a helpful use case for getting started.

And it's also going to allow us to walk through all of the key elements that you need to work with when implementing view into your own app. So to get the starter files for this particular section I want you to go to this link and I'll provide this link for you in the show notes and I want you to download the project and there's a few ways of doing this you can either click on clone or download if you're familiar with using git and github then you can click on this little icon here and this is going to allow you to paste this into your terminal and it's going to clone it on your local system.

That's one way you can do it. You can also click on download zip. That is going to download all of the files here and then you can use those or probably the easiest way is you can go click on basics because this is what we're going to be using. And then you can just copy all of the HTML and CSS code here and paste it into your text editor and then you can also come to the images and then click on each one of these and download them right here and pull them into your project.

So it does not matter whatever option that you go with all of those will be perfectly fine. I have vs code here and I have all of those code files already brought down. And so if I click here you can see that I have my index HTML file which is just what we saw up there. And I also have those images. Now, there are a number of ways that you can run this type of project.

So in previous courses I showed how you could use gulp and so gulp file will compile all the assets. It'll run a live server for us and then give us active changes. If you're using vs code you don't even need that. You could just come into your plugin section here and if you just start typing live this is going to give you a live server as a plug in option or an extension option so you can click on install here and going to install it on your system.

Then we will reload and this is even an easier way of getting a live reloading server set up so I can click on reload here. And then if I come back to the code files and click on index here click out of this. All you have to do now is right click here and then go down and say open with live server and then what that's going to do is it's going to open up this page and it opens up the index.html file. And now this is going to give us live up or live reloading.

So you see where it said branding guidelines over there. So now if I make a change on the HTML side so if I say Branding Guidelines Updated and then I'll just say updated the second that I save this file and switch back. You can see that it updated without me having to come over here and hit refresh.

So that is the code and the setup I'm going to be using throughout this course. In the next guide we're going to walk through how we can install Vue in this particular project.

Resources

• Project Code Files