Building Business Applications with Vue.js and MongoDB

Vue.js is growing fast in popularity and use. This course will teach you to build business applications using the VENoM stack, which includes Vue.js, Express.js, Node and MongoDB with Mongoose.
Course info
Rating
(24)
Level
Intermediate
Updated
Jul 17, 2018
Duration
3h 18m
Table of contents
Course Overview
Get Introduced to the Course
Technology Stack Overview
Setting Up the Demo Application
Designing the Data Layer with MongoDB and Mongoose
Developing the API with Node and Express
UI Development with Vue.js and Vuetify
Manage Application State with Vuex
Getting Data from the API
Finalizing the Demo Application
Summary and Other Options
Description
Course info
Rating
(24)
Level
Intermediate
Updated
Jul 17, 2018
Duration
3h 18m
Description

There are a number of solid Javascript frameworks with which to build business level web applications upon, but which one is right for you? In this course, Building Business Applications with Vue.js and MongoDB, you will learn how to use a framework that is growing fast in popularity and use, Vue.js, to build business applications. First, you will explore how to review design meeting notes for a fictitious company that has requested an MVP application. Next, you will learn how to build the foundation for this application, starting with MongoDB and Mongoose.js, as well as using Express.js for the API server. Finally, you will discover how to utilize various supporting libraries, such as Vuetify for UI design and Vuex for state management. When you are finished with this course, you will have a good working knowledge of and foundation for building business applications with Vue.js, Express.js, Node, and MongoDB, also known as the VENoM stack.

About the author
About the author

Mark Scott is an experienced software developer with more than fifteen years experience in IT. He is currently the Manager of Software Development for a small group of talented web developers.

More from the author
Moving Forward with Mongoose.js
Intermediate
1h 45m
18 Jul 2017
Introduction to MEAN.JS
Intermediate
2h 6m
5 Jun 2015
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Mark Scott, and welcome to my course, Building Business Applications with Vue. js and MongoDB. Vue. js and the many supporting libraries around it have been rapidly growing in popularity and use. This course will introduce you to a technology stack which includes Vue. js, Express, Node, and MongoDB with Mongoose, also known as VENoM, to build powerful and reactive business applications with. Some of the topics that we will cover include designing the data layer with MongoDB and Mongoose, developing the API with Node and Express, UI development with Vue. js and Vuetify, and managing application state with Vuex. By the end of this course, you will have a solid foundation upon which to start and build your own business applications upon, as well as options to consider with regards to other libraries and databases. Before beginning the course, you should be familiar with JavaScript and Node. js in general. I hope you'll join me on this journey to learn Vue. js with the Building Business Applications with Vue. js course, at Pluralsight.

Get Introduced to the Course
Welcome to Building Business Applications with Vue. js and MongoDB. My name is Mark Scott. If you are a full-stack JavaScript developer, or if you want to become one, and you're looking for a productive and performant combination of frameworks and libraries to build your next awesome business application with, or perhaps you've heard some good things about Vue. js and have been wondering if it's really powerful enough for your next web application project. If that's the case, then this course is for you. This course introduces you to a powerful combination of frameworks and libraries known as the VENoM stack for building powerful and responsive business applications. The core of this stack includes Vue. js, Express. js, Node. js, and Mongoose for MongoDB. As we build upon this core technology stack throughout the course, we will also dive into Vuetify, a material design framework for Vue. js, Vuex for state management, and Axios for API communications, as well as many other supporting libraries.

Technology Stack Overview
Welcome to this module on Technology Stack Overview. As stated in the previous module, here in this module, we'll start out by looking at a roadmap of sorts, the architectural approach we will take for this project. At a high level, we will be separating the user interface components from our back-end services such as our RESTful API, which will be responsible solely for getting data from and sending data to the database and, of course, to our front-end components. With the UI layer, let's just say being dumb, this provides us with a good degree of separation of concerns. This is important and will make more sense at the end of the course when we explore some optional databases and frameworks. So we know we're going to separate out the user interface project from our back-end API and data access project. We'll call these Client and Server for now. On the Client project, we will set up routes and components and manage application state. As we move forward in the course, you'll see how we will eventually have these things set up in such a way that our state management services will be responsible for making API calls to the API server. Through our state management services, we will communicate to our Server layer, the API, to send and retrieve data. Now let's take a look at what libraries, frameworks, and tools we will use in each of these projects.

Setting Up the Demo Application
Welcome to this module on setting up the demo application. This is where we get started laying the foundation for the demo application by installing the core libraries and frameworks mentioned in the previous module. We'll also explore the baseline architecture that we will use throughout the remainder of this course as we build our demo project together.

Designing the Data Layer with MongoDB and Mongoose
Welcome to this module on Designing the Data Layer with MongoDB and Mongoose. So should we begin our project by developing most or all of the UI components first and develop the database to support that front end? Or should we develop the database and the data access layer first? let's be really clear here. The correct answer to these questions is very dependent upon your project and your situation. For the purposes of this course, let's follow these high-level principles. For our client, is there more of a concern to have a specific feature in the user interface? Will the data we need to obtain and store simply support the front end, or is the client more specific and concerned about the data that they need from the application? Will they be happy, generally speaking, with the design we come up with, so long as it meets the business data requirements and rules? I believe the case can be made here, for our demo project anyway, that we have more specifics about the data the client needs entered in and reported on, and that they will most likely be happy with the front-end user experience we provide them so long as we fulfill their business requirements. So with that in mind, for this course and for the demo project, we will be developing our database and the data access layer first. Then we will move into the UI layer and get our hands into some Vue. js code.

Developing the API with Node and Express
Welcome to this module on Developing the API with Node. js and Express. js. As we mentioned in the previous module, we have decided to separate out the interface, our client project, from the API, or server project. That provides us with a good degree of separation of concerns. We'll be focusing on building out the API endpoints in this section of the course and build upon the foundation we laid out for the server project in the previous module when we developed the Mongoose schemas for users and transactions. Let's review those real quick. Our user schema has the fields first, last, email, and password, each of type String, and we've said that they are required. IsActive is of type Boolean, and we've set a default to true. The audit field of createdOn is of type Date with a default value of Date. now. And we build the user model from the userSchema and export that here. Next, we'll do a quick review of the transactionSchema. Besides all of the other fields here, make note of the userId field, which is of type mongoose. SchemaTypes. ObjectId. In the relational database world, you could think of this as a foreign key relationship here. We'll be storing the userId from the user model that we just looked at for each transaction document we send to MongoDB. And just like we did with the user model, we will pass in the transactionSchema here to build the Mongoose model transaction, which we then export.

Manage Application State with Vuex
Welcome to this module on managing our application state with Vuex. Before we dive into a discussion of Vuex, let's rewind just a little here and talk about application state management in Vue. js in general. In the previous module, we built out the Login single-file component and reviewed Home, Transactions, and EditTransactions. Those components have three sections, template, script, and style. Let's focus on the script block right now. The script block contains a number of options; a lot of those are listed here, such as name, data, props and PropsData, computed property, methods, watchers, and lifecycle hooks. Since we're talking about application state in this module, we'll spend most of our time talking about the data function in this clip, but it's good to be aware of the other options available to us within the script block. Here is simple example of a data function within a Vue component. We saw this in the Login component in the previous module. Just keep in mind again that data is a function and returns an object. This object is our Vue model, where we currently keep track of information that we wish or need our user interface to react with. And here is the same example using an arrow function, which would look like this. It's really up to you how you go about this. The key thing to remember is that data must be a function, and we need that function to return our model, the data we're binding to and working with in our application. So the script block and in particular, options such as the data function and computed properties, are where we handle state at the local, or component, level.

Getting Data from the API
Welcome to this module on Getting Data from the API. We have the data layer with MongoDB and Mongoose started, we've set up our API server using Node and Express, and we have laid out a decent foundation for the user interface side of things with Vue and Vuetify. We have been working with dummy data for the most part up until now, but it's time to start getting real, live data from the database. The promised-based HTTP client we'll be using to communicate with our API endpoints is axios. Information on axios can be found at the following URL. Let's go take a quick look at that right now. Here on the axios GitHub website, you'll find information on basic features, which browsers are known to be supported, and of course, installation instructions. Next, you'll see examples for performing a GET request, a POST request, as well as concurrent requests. The detailed part of the documentation that you may find the need to reference the most is here, the axios API docs. Let's go ahead and get axios installed now. Open a terminal, and in the client project folder, enter yarn add axios, or if you're using npm, then of course you can use npm install axios. After a minute or so, axios and the related dependencies should be installed. We can open up Visual Studio Code real quick to confirm, looking in the package. json file, and here we have axios. We should be ready to use axios to communicate with our API now.

Finalizing the Demo Application
Welcome to this module on Finalizing our MVP Demo Application. Let's start by doing a review of the business requirements that we've gotten working so far. Users are required to log in, and we're now getting that information from the database. Once logged in, users need to view the current month's transactions, and we need to give them a way to navigate back to previous months, as well as return to the current month. We are calculating and showing a running balance. And we're able to search within our current month's transaction data. We have a few more development tasks that need to be done before we can present this MVP demo application to our fictitious client. First off, we currently are not able to enter in new transactions. The EditTransactions. vue component was added earlier, but now we need to finalize that, including wiring up to the Vuex store to make the necessary API calls. As part of that, we need to make sure we're also limiting the transaction types to the given selection list. Next, we need to give the user the ability to enter in longer notes for a given transaction record. A few development items that would be nice to have before we present are, give the user the ability to edit their user profile. A good place to put this would be in the application's header. As mentioned earlier in the course, we can do this in a HeaderActions. vue component. Also, earlier in the course, we used a predefined template when we added Vuetify to the project. That gave us a nice, collapsible left-navigation menu. Let's add some functionality to this as well.

Summary and Other Options
Welcome to the summary module where we look at other options. Obviously in this course we utilized a stack of libraries and frameworks we've lovingly called the VENoM stack. Since the primary focus was on Vue. js and supporting libraries like Vuex, you probably do not have an issue with the top part of this stack, including Node and Express, but perhaps you need other options for your project with regards to the database or other supporting libraries. That's what we'll close out this course discussing.