Vue App Boiler Plate
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
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 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
Running app boilerplate
After you have the boilerplate code on your machine, you can start the app
using the following
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.