vue

adding posts, footer to vue portfolio pt.2

listening to doja cat on October 13th, 2021

aight we are adding the card posts to the main page. This is the default bootstrap styling, maybe we'll spruce it up a bit, but for now, just add the CardPosts.vue component.

Within the App.vue file, delete all references to HelloWorld.vue, as well as the default vue logo. Add the CardPosts.vue component. I'm also wrapping the posts with a container div. I'm also adding a footer for this project. Killing all the birds with one stone today!

html
<template>
    <div id="app">
        <Header />
        <div class="container">
            <CardPosts />
        </div>
        <Footer />
    </div>
</template>

<script>
import Header from './components/Header.vue'
import CardPosts from './components/CardPosts.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'App',
  components: {
    Header,
    CardPosts,
    Footer
  }
}
</script>

<style>
@import './assets/styles/bootstrap.css';
#app {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
</style>

Let's start with the CardPosts.vue first. I'm grabbing this default card template from bootstrap's documentation. I'm making some minor modifications. The bootstrap img has a src of .... This will return a build error on your local vue instance, it's a very obvious build error thanks to eslint. I'm using placeholder kitten images. If you hate cats for whatever reason(dafuq tho), you can use placeholder doggos. If you just hate animals period you can use blank placehold images.

Let's remove the border styling, as well as replacing the button link style to a traditional link.

html
<template>
    <div class="posts row">
        <div class="card col-md-3 col-sm-6 posts__card">
            <img src="https://placekitten.com/200/100" class="card-img-top" alt="">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <div class="card-body">
                <a href="#" class="card-link">Card link</a>
            </div>
        </div>
        <div class="card col-md-3 col-sm-6 posts__card">
            <img src="https://placekitten.com/200/100" class="card-img-top" alt="">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <div class="card-body">
                <a href="#" class="card-link">Card link</a>
            </div>
        </div>
        <div class="card col-md-3 col-sm-6 posts__card">
            <img src="https://placekitten.com/200/100" class="card-img-top" alt="">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <div class="card-body">
                <a href="#" class="card-link">Card link</a>            </div>
        </div>
        <div class="card col-md-3 col-sm-6 posts__card">
            <img src="https://placekitten.com/200/100" class="card-img-top" alt="">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <div class="card-body">
                <a href="#" class="card-link">Card link</a>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    name: 'CardPosts'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.posts {
    margin: 1rem auto;
}
.posts__card {
    border: none;
}
</style>

Now we are going to add the footer to the site. I want to add the year once and never have to update it again. It's so easy to just forget. I want to add a new Date function. I can do this a few different ways. There is really no wrong way to do it, it's up to developer preference. I've seen both out in the wild. I've also seen the year hardcoded on enterprise level, world wide sites, but we're not getting into that now.

You can do this inline, which is what I did for my personal site, jennyq.co :) The only difference is that you use double brackets with Vue vs. one bracket for React:

html
<template>
    <footer class="footer bg-light">
            <p>&copy; {{new Date().getFullYear()}} Jennifer Quispe. All rights reserved.</p>
    </footer>
</template>

<script>
export default {
    name: 'Footer'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.footer {
    padding: 1rem 0;
    font-size:.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}
</style>

You can also add it as a method within the script tags on your vue component. Since this is a function, you need to write it as `{{ footerDate() }}, if not you will see an error.

html
<template>
    <footer class="footer bg-light">
            <p>&copy; {{footerDate()}} Jennifer Quispe. All rights reserved.</p>
    </footer>
</template>

<script>
export default {
    name: 'Footer',
    methods: {
        footerDate() {
            return new Date().getFullYear();
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.footer {
    padding: 1rem 0;
    font-size:.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}
</style>

Your local should look something like this:

view all posts