Creating a Mobile Web App with Vue, Vuetify & Typescript — Part 1This article covers creating a Mobile Web App from scratch using a bunch of tools from the Vue ecosystem.
The fictitious app we’re going to create is a News App.
Jon KeepingBlockedUnblockFollowFollowingJan 19News App — Application ShellWe’re going to use Vuetify for the material design components and Vue Router to handle navigation.
The code is going to be written in TypeScript.
Part 1 of this article will cover creating the application shell.
In future articles, we’ll build further functionality and make use of Jest and Vue Test Utils to write our unit tests.
The code for this article is available on the GitHub repo:https://github.
com/JonUK/vuetify-mobile-appCreating the ProjectSo without further ado, let's create our project.
We’re going to use the Vue CLI 3 so first ensure this is installed.
npm install -g @vue/cliThen we can use the Vue CLI to create our project.
vue create vuetify-mobile-appThe Vue CLI will guide us through creating the new project and prompt us with with some questions.
We’ll manually select the features ensuring we include Babel, TypeScript, Router, Vuex & Unit Testing:For the rest of the options, we’ll use the defaults other than the unit testing solution where we’ll go for Jest.
At this point, the Vue CLI will work it’s magic and create the project for us and install all the npm dependencies.
From here, we can run the website up from the new project directory.
cd vuetify-mobile-appnpm run serveGoing to http://localhost:8080/ in a browser shows our site it all it’s glory!Installing VuetifyVuetify is a fantastic component framework that will allow us to create a great looking app by composing several existing components together.
We’ll install Vuetify as a plugin.
vue add vuetifyNow if we run the site up, we see we’ve had a beautify to Vuetify!After installing Vuetify, there were a few linting fixes I needed to make and a tweak to how Vuetify was referenced.
These glitches might be resolved by the time you read this but if you hit issues, you can see the changes I had to make.
https://github.
com/JonUK/vuetify-mobile-app/commit/aef8d5cc9ec81fcd1ab23f56703ee7373087b227Top Toolbar ComponentThe first component we’re going to create is a toolbar component for display at the top of the app.
Create a Vue Single File Component (SFC) called TopToolbar.
vue in the folder src/components folder.
We have essentially wrapped the Vuetify toolbar and navigation drawer components together in our own component.
The “hamburger menu” icon toggles the display of the navigation drawer which contains two dummy entries “Setting” and “Help” along with corresponding icons.
In the TypeScript code, we define the class TopToolbar and use the @Component decorator to indicate the class is a Vue component.
The class contains the property showMenu which is typed to a boolean.
This is the equivalent of a data object property when using Vue with JavaScript.
The class also contains the method toogleMenu to hide and show the navigation drawer.
In the template, the attributes app and fixed ensure the toolbar is displayed as part of the application layout (rather than part of the general content) which means our toolbar will display at the top of the viewport.
The v-toolbar component contains the color="primary" attribute which sets the toolbar to the Vuetify theme primary color, the default of which is blue.
More information about themes can be found on the Vuetify documentation site.
https://vuetifyjs.
com/en/framework/themeVuetify uses a font file which contains all the Material Design icons.
The full range of Material Design icons available and their names can be found on the Google Material Design site.
https://material.
io/tools/iconsPlacing an icon name inside a <v-icon></v-icon> tag is all that’s needed to display an icon.
When creating Vue components, it’s best practice to always use two or more words for the name of your component.
This will prevent you from creating a component that conflicts with existing and future HTML elements.
https://codingexplained.
com/coding/front-end/vue-js/component-naming-conventionsBottom Nav ComponentThe primary navigation we’ll use on our app is a bottom navigation menu.
Placing the primary navigation at the bottom of the screen is ideal for mobile apps as the menu can comfortably be reached with one-handed and one-thumb interactions.
Create a file called BottomNav.
vue in the folder src/components folder.
This defines the three menu items “Top Stories”, “Code Examples” and “Favourites” we’ll have on our app.
The attributes app and fixed again signify that the bottom nav is part of the application layout which means it will be displayed at the bottom of the viewport.
For now, changing the active menu item does nothing.
Later on we’ll revisit this component and using the router, implement navigation.
Create the Application ShellNow we have created the TopToolbar and BottomNav components, let’s actually use them in App.
vue.
Now when we view the site, we can see our two new components in action.
Add View ComponentsOur app is starting to take shape nicely but we still don’t have any content to show a user as they navigate through the bottom navigation menu items.
In the project, we have the folder src/views and this is where we’ll place components that act as views and are navigated to.
Create three components TopStories.
vue CodeExamples.
vue and MyFavorites.
vue in the src/views folder with the below code in each, adjusting the heading as appropriate for each page.
We don’t need these components to contain any code so we can safely omit the <script></script> tag.
We now need to update the router so it’s aware or each of these components and create a route with a path and name for each view component.
With the routes now in place, lets update the BottomNav component so each item references the route in the router.
I prefer to reference routes by name as this provides you with the flexibility of changing the routing structure later on.
When referencing the root path route by name, I encountered an issue that the menu item was always being rendered as active so I switched to referencing the route by path for this menu item.
The final step is to update the App.
vue <template></template> to add the <router-view></router-view> tag which acts as the target for where the view component for the current route is rendered.
Congratulations!.The News App is now using the router to navigate between the different view components.
You must immediately stop and celebrate your mad skills!The code for this article is available on the GitHub repo:https://github.
com/JonUK/vuetify-mobile-appThis is the first article I’ve written here on Medium and hope it’ll be useful.
I plan to publish future parts which will cover creating new components to list news articles and display a full article, transitions as a user navigates around and unit tests.
.