52. Tour of the client app

We're not going to be building a client app from scratch in this course. This is because I assume you know how to build a Vue.js SPA already, and so I don't want to waste time going over the basics again.

So I've gone ahead and laid down the main structure of the client app. However, a lot of the features, like the application state and authentication, don't yet work. So those are the parts that we'll obviously be implementing together.

So for the rest of this video, I'm going to give you a very brief tour of the main aspects of the client app so that you're somewhat familiar with it before we begin adding more code.

main.js

A good place to start is here in the main.js file. This is largely setup in the standard way for a Vue CLI 3 project. You'll see that we've got a router and a store on our Vue instance, and that we're rendering a component called App as the root component.

client/main.js

new Vue({
  router,
  store: new Vuex.Store(store),
  render: h => h(App)
}).$mount("#app");
`

Vuetify

One thing that is not standard in this project is the inclusion Vuetify. You've probably heard of it and maybe used it, but if not, it's a component library for Vue.js that implements the Material Design standard.

I decided to use Vuetify because it makes it really easy to create a good looking, responsive layout, and to include a lot of useful UI widgets which Vuetify supplies out of the box, like cards, buttons, tabs, and so on.

I think Vuetify is quite suitable for enterprise apps as it's based on a very thorough spec, plus it's well tested and maintained.

App.vue

Looking now at the root component, App.vue, you can see a few of the Vuetify layout components here like v-app, v-content, and v-container. These are being used to create the basic app structure.

We've also got some custom components in here like StickyNav, FixedNav, and PageFooter.

And right in the middle here, we have our router-view component which is where all of our views get rendered.

Looking at the live app now, you can see that structure pretty well reflected in how the page looks. Here's the sticky nav, here's the fixed nav, here's where our views get rendered, and here's the footer. And that layout is supported by the Vuetify layout components.

Views

In our router file you'll see how we map different paths to the pages of the app. We call these main pages our views. We have a home view, an item, view, a cart view and several more.

These views all corrospond to a component over here in the views directory.

Opening up one of these views now, Home.vue, you can see we've set this up in very much the same way that we did with the App component.

That is to say we've got a basic layout using Vuetify, as well as some custom components, like this one here, ItemSummary.

Components

Any custom component that isn't used as view will be used to create our composable layouts. These are all contained in the directory components. We'll be getting familiar with many of those as the course progresses.

Other files

And finally, we have various other files in the app including some mixins, a Vuex store, and, some various helper files. These include ones containing constants, filters and so on.

With that, you now have a good understanding of the PrintBay client app in its current state. Now we're ready to start adding some new features.

Discussion

4 comments