Desktop Development for the Web Developer - Part 4

vite, vue 3, electron, and tailwind for desktop development

Summary

For the 4th installment of this series we are going to implement routing into our app. Like a web app, our desktop app needs to be able to show different screens based on where the user wants to go.

Why vue-router?

"...with Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them..."

Even though vue-router isn't part of the main vue library, it is a really solid first party library. We know it is built to work with our app and will get on-going support. Let's get started!

Usage

yarn add vue-router@next

This will allow us to move between "screens" in our application as it would between views on the web.

To setup the router let's create a directory and file:

mkdir src/router && touch src/router/index.js

For the sake of the post we'll make a two routes. We can add them to our new file.

As you can see, we have named a couple of components that don't exist yet. Right now, our UI is all in the App.vue file. This is fine for getting our workflow setup but we can't keep it like this as our app grows. We need a place to break out our different screens so we can get them out of the same file:

mkdir src/components/screens && touch src/components/screens/HomeScreen.vue && touch src/components/screens/AppointmentsScreen.vue

We can most of the contents out of our existing App.vue and put it in our HomeScreen.vue.

Also, let's make sure the routing works by having an AppointmentsScreen.vue.

We can delete our App.vue because we are going to change the initialization of our app in main.js to use DefaultLayout.vue instead. You will notice in our main.js we also imported our router and told vue to use it. vue-router will look for the router-view we put in our DefaultLayout.vue to load the default route.

If you we add some router-links to the DefaultLayout.vue BOOM! We can now navigate from HomeScreen.vue to the AppointmentsScreen.vue and back.

Navigation between pages

Next Up

  • State Management Using vuex to create a central place to store data.

Reference

github repo - part 4