GitHub repo

All of the code for building the example Vue app shown in this tutorial is available in GitHub in the Message Board App Tutorial repo.

Each step in the tutorial is recorded as a tag on the learn-tutorial branch in that repo. That means you can complete each step in the tutorial and also look at the git diff if you’re comparing what’s described to the corresponding code changes.

Boilerplate

You’d start an app like this with vue create ... and then use the below commands to add the dependencies listed on the previous page (i.e., Tailwind CSS, Semantic UI Vue, etc.)

vue add router
vue add apollo
npm install --save semantic-ui-vue semantic-ui-css

This tutorial starts with the minimal boilerplate already complete.

For this tutorial, you can start with the boilerplate Vue app and CSS by checking out the setup from GitHub. To do this, see the boilerplate commit.

You can do this using the git CLI.

git clone https://github.com/dgraph-io/discuss-tutorial-vue
cd discuss-tutorial
git fetch --all --tags
git checkout tags/tutorial-boilerplate -b learn-tutorial

Alternatively, you can visit https://github.com/dgraph-io/discuss-tutorial-vue/tags and download the archive (.zip or .tar.gz) for the tutorial-boilerplate tag.

Running app boilerplate

After you have the boilerplate code on your machine, you can start the app using the following npm command:

npm run serve

This command builds the source and serves the app UI in development mode. The app UI is usually served at http://localhost:3000, but the exact port may vary depending on what else is running on your machine. Yarn will report the URL as soon as it has the server up and running.

Navigate to the provided URL, and you’ll see the boilerplate app running, as seen below:

At this point, you have just the CSS styling and minimal Vue setup. Next, you’ll move on to building the app.