I have gone ahead and set up a brand new VGS project with npm init view at three. Notice that I have chosen to include view router out of the box, as well as TypeScript. Now my next step is to actually install the unplug in view router dependency. So I'll copy this line here from the GitHub repository, and then I'll paste it over into my IDE, into my terminal.
Notice that you do have several different options for how you want to install a plugin view router based on the build tool that you want to use. Vite is the most popular one, so I'll use this setup right here. We'll just import view router from the package. Notice that we are getting it from the Vite folder within the package, and then we need to call the plugin inside of the plugins array.
ts, We'll import the dependency and then we will call it here within the plugins. Almost done, but not quite yet. The next step is to register a few different things with TypeScript in order to get our autocomplete and error detection working properly. dts file, which will now live at the root of our directory.
It should be included in the includes array. json. json, and paste it into the includes array. Notice that this file is auto-generated for us at the root of our project.
If it was not auto-generated for you, make sure you have the development server up and running. You never have to modify this file yourself, but it is recommended that you commit this file to your GitHub repository. As you're adding new routes, new pages to your application, the Veep plugin is going to automatically update this and keep track of all of your different routes and paths in TypeScript plan so that it can do those auto completions for you. The next thing we need to do is also set the module resolution here to Bundler and add in some more generic types from Unplugin View Router.
I'll copy that and then paste that in my TS config. Great. With those things said, we've got the foundation laid for working with Unplugin View Router. Let's take a look at our application in the browser though and see what the bootstrapping gave us out of the box.
Here we have a home page with a list of different resources on the right hand side and we have an about page that just says this is an about page. This isn't actually using the Unplugin View Router yet though. Notice over in my file structure here, we have a router directory under source. ts here.
And in this file, we have a routes array defined here that manually maps paths, route paths like slash to view components like a home view component. And the same thing here for slash about and then about view component. This is what we want to get rid of with unplug in view router. We want all of these routes and their paths to be automatically generated for us based on what lives in our file structure.
So we can delete all those routes. Then instead of importing our create router and create web history functions from view router, we need to import them from view router auto. Next, we should rename the views directory to the pages directory. This is just a convention that comes with UnpluginViewRouter.
And then finally, instead of naming our files about view and home view, we need to name them based on the path that we want them to have. So a route that should be available at the root route of the application or a page that should be available at the root route of the application should live directly inside of the pages directory. view. view and have it in the root pages directory.
I'll save that and then I'll also remove this import of home view as that's no longer needed here. Back over in the browser now, give the page a refresh. And it looks like the pages part is broken. Let's restart the dev server.
I dare say you'll have to do that as well. Okay, great. Now the pages are working exactly as they were before. view inside of the file system, and we have the about page at slash about.
The rest of working with view router looks basically exactly the same. view, you'll notice that we're still using router links in order to navigate between the pages. And you'll notice that we're still using router view in order to display the page, so nothing really changes about that syntax. However, if I try to autocomplete one of the routes here in router link, you'll notice that my route options aren't available, like in the screenshot in the very first lesson.
Well, the one last thing you need to do is whenever you import something from view router, now instead of importing it directly from view router, you want to import it from view router With that in place, immediately down here, I can press control space bar and have those two routes auto-completable for me within my auto-complete dropdown. And of course, I want the home link to direct to the route route. js applications.