Today we’ll build an application using VueJS, but we can’t just do a todo app as is customary (that’s already been done anyway). We needed something a bit more complicated, so we’ll build an application that shows a paginated list of items (tutorials in this case, but it can easily be retrofitted with other data types) that can be filtered by a search bar or some radio options. This tutorial assumes you know Vue, or know how to traverse the docs, so it’s more of an example of what it can do than it is tutorial in how to use Vue.
What you see in this tutorial is only the first step, though. In future iterations, you will see how Vuex, Vue-Router and connecting to an API server should look. Until then, we’ll just be using Vue (and Boostrap… don’t judge, we just needed something that would help me do this quickly).
Getting Set Up
The first thing we need to do is get the project set up. The easiest way to do this is with vue-cli because it will scaffold out a base application for us with a nice build system and development workflow. So let’s install it via npm and use it right away:
npm install -g vue-cli
vue init webpack tutorial-search
We’ll be using the ‘webpack’ template because it has all the tools we need, including Babel so we can use ES6/ES2015, and we need to choose something. When running
inityou’ll need to fill in some information about the project: enter in whatever Project Name, Description, and author information you think is appropriate, choose “Runtime-only” since we’ll be using single file components and won’t need to compile templates at runtime. You can answer “no” (technically “n”) to the rest of the questions because there won’t be enough time/space in this article to go over using those technologies, but you’re free to use them if you wish. Then, after running the rest of the commands, everything should be set up for us. Run
npm run dev to see if it works for you. You can keep that running if you’d like, but it’ll probably end up showing a lot of errors until we’re done.
Now we need to install Bootstrap and strip out the bits that we don’t want from the tiny app that already exists.
npm install -S [email protected] gets us Bootstrap. Then we’ll delete
/src/App.vue into the
/src/components/ folder because it is a Vue component, so why shouldn’t it be in there with the rest of them. Then, finally we need to edit our
- Change the line that imports
Appto import from
./components/Appbecause we moved the file
- Add an import for Bootstrap with
- While you’re in here, you might as well delete that ESLint comment, since we’re not using ESLint.
The Application Foundation
Now we need to move on to
App.vue. First we’ll create some of the basic static elements of the application:
Use the search box and technology selector to find a tutorial you’re looking for.