Vue.js is a JavaScript framework with growing number of users. Released 4 years ago, it's now one of the most populare front-end frameworks. There are some reasons why people like Vue.js. Using Vue.js is very simple if you are already familiar with HTML and JavaScript. They also provide clear documentation and examples, makes it easy for starters to learn the framework. Vue.js can be used for both simple and complex applications. If your application is quite complex, you can use Vuex for state management, which is officially supported. In addition, it's also very flexible that yu can write template in HTML, JavaScript or JSX.
This tutorial shows you how to integrate Vue.js with Node.js backend (using Express framework) and MongoDB. As for example, we're going to create a simple application for managing posts which includes list posts, create post, update post and delete post (basic CRUD functionality). I divide this tutorial into two parts. The first part is setting up the Node.js back-end and database. The other part is writing Vue.js code including how to build .vue code using Webpack.
Dependencies
There are some dependencies required for this project. Add the dependencies below to your package.json. Then run npm install to install these dependencies.
"dependencies": {
"body-parser": "~1.17.2",
"dotenv": "~4.0.0",
"express": "~4.16.3",
"lodash": "~4.17.10",
"mongoose": "~5.2.9",
"morgan": "~1.9.0"
},
"devDependencies": {
"axios": "~0.18.0",
"babel-core": "~6.26.3",
"babel-loader": "~7.1.5",
"babel-preset-env": "~1.7.0",
"babel-preset-stage-3": "~6.24.1",
"bootstrap-vue": "~2.0.0-rc.11",
"cross-env": "~5.2.0",
"css-loader": "~1.0.0",
"vue": "~2.5.17",
"vue-loader": "~15.3.0",
"vue-router": "~3.0.1",
"vue-style-loader": "~4.1.2",
"vue-template-compiler": "~2.5.17",
"webpack": "~4.16.5",
"webpack-cli": "^3.1.0"
},Project Structure
Below is the overview of directory structure for this project.
app
config
controllers
models
queries
routes
views
public
dist
srcThe app directory contains all files related to server-side. The public directory contains two sub-directories: dist and src. dist is used for the output of build result, while src is for front-end code files.
Model
First, we define a model for Post using Mongoose. To make it simple, it only has two properties: title and content.
app/models/Post.js
const mongoose = require('mongoose');
const { Schema } = mongoose;
const PostSchema = new Schema(
{
title: { type: String, trim: true, index: true, default: '' },
content: { type: String },
},
{
collection: 'posts',
timestamps: true,
},
);
module.exports = mongoose.model('Post', PostSchema);Queries
After defining the model, we write some queries that will be needed in the controllers.
app/queries/posts.js
const Post = require('../models/Post');
/**
* Save a post.
*
* @param {Object} post - Javascript object or Mongoose object
* @returns {Promise.}
*/
exports.save = (post) => {
if (!(post instanceof Post)) {
post = new Post(post);
}
return post.save();
};
/**
* Get post list.
* @param {object} [criteria] - Filter options
* @returns {Promise.<Array.>}
*/
exports.getPostList = (criteria = {}) => Post.find(criteria);
/**
* Get post by ID.
* @param {string} id - Post ID
* @returns {Promise.}
*/
exports.getPostById = id => Post.findOne({ _id: id });
/**
* Delete a post.
* @param {string} id - Post ID
* @returns {Promise}
*/
exports.deletePost = id => Post.findByIdAndRemove(id);Controllers
We need API controllers for handling create post, get post listing, get detail of a post, update a post and delete a post.
app/controllers/api/posts/create.js
const postQueries = require('../../../queries/posts');
module.exports = (req, res) => postQueries.save(req.body)
.then((post) => {
if (!post) {
return Promise.reject(new Error('Post not created'));
}
return res.status(200).send(post);
})
.catch((err) => {
console.error(err);
return res.status(500).send('Unable to create post');
});app/controllers/api/posts/delete.js
const postQueries = require('../../../queries/posts');
module.exports = (req, res) => postQueries.deletePost(req.params.id)
.then(() => res.status(200).send())
.catch((err) => {
console.error(err);
return res.status(500).send('Unable to delete post');
});app/controllers/api/posts/details.js
const postQueries = require('../../../queries/posts');
module.exports = (req, res) => postQueries.getPostById(req.params.id)
.then((post) => {
if (!post) {
return Promise.reject(new Error('Post not found'));
}
return res.status(200).send(post);
})
.catch((err) => {
console.error(err);
return res.status(500).send('Unable to get post');
});app/controllers/api/posts/list.js
const postQueries = require('../../../queries/posts');
module.exports = (req, res) => postQueries.getPostList(req.params.id)
.then(posts => res.status(200).send(posts))
.catch((err) => {
console.error(err);
return res.status(500).send('Unable to get post list');
});app/controllers/api/posts/update.js
const _ = require('lodash');
const postQueries = require('../../../queries/posts');
module.exports = (req, res) => postQueries.getPostById(req.params.id)
.then(async (post) => {
if (!post) {
return Promise.reject(new Error('Post not found'));
}
const { title, content } = req.body;
_.assign(post, {
title, content
});
await postQueries.save(post);
return res.status(200).send({
success: true,
data: post,
})
})
.catch((err) => {
console.error(err);
return res.status(500).send('Unable to update post');
}); Routes
We need to have some pages for user interaction and some API endpoints for processing HTTP requests. To make the app scalable, it's better to separate the routes for pages and APIs.
app/routes/index.js
const express = require('express');
const routes = express.Router();
routes.use('/api', require('./api'));
routes.use('/', require('./pages'));
module.exports = routes;
Below is the API routes.
app/routes/api/index.js
const express = require('express');
const router = express.Router();
router.get('/posts/', require('../../controllers/api/posts/list'));
router.get('/posts/:id', require('../../controllers/api/posts/details'));
router.post('/posts/', require('../../controllers/api/posts/create'));
router.patch('/posts/:id', require('../../controllers/api/posts/update'));
router.delete('/posts/:id', require('../../controllers/api/posts/delete'));
module.exports = router;
For the pages, in this tutorial, we use plain HTML file. You can easily replace it with any HTML template engine if you want. The HTML file contains a div whose id is app. Later, in Vue.js application, it will use the element with id app for rendering the content. What will be rendered on each pages is configured on Vue.js route on part 2 of this tutorial.
app/routes/pages/index.js
const express = require('express');
const router = express.Router();
router.get('/posts/', (req, res) => {
res.sendFile(`${__basedir}/views/index.html`);
});
router.get('/posts/create', (req, res) => {
res.sendFile(`${__basedir}/views/index.html`);
});
router.get('/posts/:id', (req, res) => {
res.sendFile(`${__basedir}/views/index.html`);
});
module.exports = router;Below is the HTML file
app/views/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Tutorial by Woolha.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>
<body>
<div id="app"></div>
<script src="/dist/js/main.js"></script>
</body>
</html>app/index.js
require('dotenv').config();
const bodyParser = require('body-parser');
const express = require('express');
const http = require('http');
const mongoose = require('mongoose');
const morgan = require('morgan');
const path = require('path');
const dbConfig = require('./config/database');
const routes = require('./routes');
const app = express();
const port = process.env.PORT || 4000;
global.__basedir = __dirname;
mongoose.Promise = global.Promise;
mongoose.connect(dbConfig.url, dbConfig.options, (err) => {
if (err) {
console.error(err.stack || err);
}
});
/* General setup */
app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(morgan('dev'));
app.use('/', routes);
const MAX_AGE = 86400000;
// Select which directories or files under public can be served to users
app.use('/', express.static(path.join(__dirname, '../public'), { maxAge: MAX_AGE }));
// Error handler
app.use((err, req, res, next) => { // eslint-disable-line no-unused-vars
res.status(err.status || 500);
if (err.status === 404) {
res.locals.page = {
title: 'Not Found',
noIndex: true,
};
console.error(`Not found: ${req.url}`);
return res.status(404).send();
}
console.error(err.stack || err);
return res.status(500).send();
});
http
.createServer(app)
.listen(port, () => {
console.info(`HTTP server started on port ${port}`);
})
.on('error', (err) => {
console.error(err.stack || err);
});
process.on('uncaughtException', (err) => {
if (err.name === 'MongoError') {
mongoose.connection.emit('error', err);
} else {
console.error(err.stack || err);
}
});
module.exports = app;That's all for the server side preparation. On the next part, we're going to set up the Vue.js client-side application and build the code into a single JavaScript file ready to be loaded from HTML.
