Create a wish list for Christmas using Django and Vue - part 2

Create a wish list for Christmas using Django and Vue - part 2

Published 22. nov 2018 10:06 by Stein Ove Helset

Christmas is coming up and learning Django and Vue by creating a relevant project couldn't be any better. In this part we'll set up the front page.

In the previous part of this tutorial we installed and configured both Django and Vue. Now we are going to proceed to building authentication. We're going to need a sign up form, a sign in form and we also need to make it possible to sign out of the app.

Bulma

We are going to use Bulma to make it easier to make the project look good. We don't want to spend a lot of time tweaking CSS when we want to learn Django and Vue. Installing Bulma and using it in a Vue project is very easy. Run this command to install it:

$ npm install bulma

Bulma should now be installed, and the easiest way to include it in our project is to just import Bulma's main CSS file. Open up "src/App.vue" and scroll down to the CSS-block. Add this line to the top:

@import "~bulma/css/bulma.css";

When this is done, Bulma is ready to be implemented to our site.

Setting up the front page

Let's start by setting up a basic front. It's not going to be a big deal. We're just going to show some information and explore Vue.js a little bit. Open up "src/App.vue" and modify it to look like this.

<template>
    <div id="app">
        <nav class="navbar" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <a class="navbar-item" href="/">Wishlist</a>
            </div>

            <div class="navbar-menu">
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="field is-grouped">
                            <p class="control">
                                <button class="button is-primary">Sign in</button>
                            </p>

                            <p class="control">
                                <button class="button is-success">Sign up</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <div class="main container">
            <router-view/>
        </div>
    </div>
</template>

<style>
    @import "~bulma/css/bulma.css";

    .main {
        padding-top: 50px;
    }
</style>

We're keeping it as simple as possible. At the top of the screen we have a navigation bar with a "logo" and a menu on the right side where we can sign in and sign up. The buttons don't have any functionality for now, but we'll come back for them later.
We've added a <router-view/>. This is where all of the contents of a route/page will be loaded. Don't worry, Vue will handle this for us!

We can continue by adding a little bit more to the front page. Open "src/views/Home.vue" in you editor and modify it to look like this:

<template>
    <div class="home columns">
        <div class="column is-full">
            <h2 class="title">Welcome to Wishlist</h2>

            <p>
                Create wish lists and send them to your friends and family.
            </p>

            <hr>

            <b>Wish lists created so far:</b> {{ num_wishlists }}<br>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'home',
        data () {
            return {
                num_wishlists: 981
            }
        }
    }
</script>

When you've done this, part 2 of this tutorial is finished. But let me explain what we've done. The HTMl should be familiar to you, but you might see a {{ num_wishlists }}. This is something called a expression, and this is used by Vue.js to render data to the site. This is bound to the variable called "num_wishlists" inside the function below. If you change the number in the data-array from the browsers console or via a function, the number of the screen will automatically update.

And that's it for this part. I hope you liked it and that you'll come back for the next part. In the third part of this tutorial, I'll show how to create the sign up page.

Share this post

Comments

No comments yet

Add comment