Building a feature complete bookmarking app with Vue.js, Express and Sequelize ORM
This tutorial walks through building a Node.js, MySQL and front-end framework (Vue.js) application. Client side code is bundled with webpack.
Here is the github link for viewing the application source code: https://github.com/connor11528/sequelize-bookmarks
This application is capable of Creating, Reading, Updating and Deleting (CRUD) Authors and Books from a MySQL database. Each Book belongs to an Author and a each Author has many books. For a great review of how SQL database associations work review here.
There was no part 2 for this tutorial series and I was sick of writing Angular.js 1.x code. I have played with React.js but quickly became confused as to the best way to manage async state across components. I knew Vue.js was popular in the Laravel community so decided to check it out.
I quickly new that this was my new front end framework. Vue.js is cleaner and easier to reason about than Angular.js 1.x and is easier to learn than React.js. It comes with many of the features you expect, and for more complex solutions the core team maintains Vuex.
For learning Vue.js I suggest Jeffrey Way’s Learning Vue 1.0: Step By Step
The most difficult part was getting the app setup. I could have split the backend API from the frontend into two repositiories (as that is recommended by the core team) but whatever YOLO.
I used the Vue command line tool: https://github.com/vuejs/vue-cli
I highly recommend using Vueify. This tool is responsible for those funky .vue files in the client side directory. This allows you to put all the code related to a component in a single file. Each file will have it’s own Vue instance which acts like scope in angular. It is easy to reason about as it is essentially an object with about four properties.
For routing: vue-router
For AJAX requests: vue-resource
All of these are maintained by the Vue Github organization.
For some extra awesome typeahead functionality I used vue-strap.
This app can me deployed to heroku by messing with configuration variables and installing some SQL addons. I am not going to do that.
If you need a bookmark application use Goodreads! On a brighter note though, the source code for this application will get you up and running with Vue.js, Sequelize, Node.js and Webpack.
If you have any questions hit me up on Twitter.
If you enjoyed this breakdown tell your friends to tell their friends.
Originally published on Medium