Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
TRACK

JavaScript Frameworks & Tools >

COURSE

The Delightful World of Vue Part 2

Buy Access to Course

Making the Title Component Less Smart

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.
Previous Challenge

Next Chapter
Edit on GitHub

In the last tutorial, we created a title component, which we're reusing so that we can have a consistent look and styling.

43 lines assets/components/title.vue
<template>
<div :class="$style.component">
<h1>
{{ categoryName }}
</h1>
</div>
</template>
<script>
export default {
name: 'Title',
... lines 12 - 32
};
</script>
<style lang="scss" module>
.component {
h1 {
font-size: 1.7rem;
}
}
</style>

Cool! In product-show.vue, let's use that! Import TitleComponent from @/components/title, add this into the components key, then up here, instead of our manual <h1>, say <title-component />.

43 lines assets/components/product-show.vue
<template>
<div>
<loading v-if="loading" />
<div v-if="product">
<title-component />
</div>
</div>
</template>
<script>
... lines 12 - 13
import TitleComponent from '@/components/title';
... line 15
export default {
... line 17
components: {
Loading,
TitleComponent,
},
... lines 22 - 40
};
</script>

I'm purposely not passing a prop to this yet... and yes, I know it looks weird - like "how will it know what title to render?". Ya see... we have a problem.

Back at the browser, we're on a product page and it... seems to... kind of work. It says "All Products". But more importantly, there's an error!

Missing required prop categories.

We're apparently supposed to pass a categories prop to title... which is weird, because I'm not sure what categories have to do with printing a title. We better go check out that component. Ah... this component is way too smart: it expects us to pass it the array of all categories and the currentCategoryId. And then it does the logic to figure out if we're on a category page and either prints that category name or "All Products". There's no way for us to make it render anything else.

43 lines assets/components/title.vue
<template>
<div :class="$style.component">
<h1>
{{ categoryName }}
</h1>
</div>
</template>
<script>
export default {
name: 'Title',
props: {
currentCategoryId: {
type: String,
default: null,
},
categories: {
type: Array,
required: true,
},
},
computed: {
categoryName() {
if (this.currentCategoryId === null) {
return 'All Products';
}
const category = this.categories.find((cat) => (cat['@id'] === this.currentCategoryId));
return category ? category.name : '';
},
},
};
</script>
... lines 35 - 43

Converting to a Dumb Component

What we need to do is convert title into a dumb component that does nothing more than receives props and uses them. This is really a mistake that I made in the last tutorial. We've talked a few times about having dumb components that mostly just render markup and then smart components that do calculations & load data, but don't render much markup. This is not an absolute rule... and I don't always follow it - but it's a nice guide to keep things organized and reusable.

Ok: let's make this component less smart! Under props, we only need one: call it text. It will be a String and also required.

39 lines assets/components/title.vue
... lines 1 - 8
<script>
export default {
name: 'Title',
props: {
text: {
type: String,
required: true,
},
},
... lines 18 - 28
};
</script>
... lines 31 - 39

Then, in the template, instead of categoryName, just render text!

39 lines assets/components/title.vue
<template>
<div :class="$style.component">
<h1>
{{ text }}
</h1>
</div>
</template>
... lines 8 - 39

What about all the logic inside the categoryName computed prop? Copy this and delete the entire computed section. Now open assets/components/catalog.vue. This is the one place that currently renders the title component and it is what should be responsible for determining its title text. Down in the component, this doesn't have a computed section yet, so add one after data - computed - and paste categoryName. Both this.currentCategoryId and this.categories are available on this component, so this "should" just work.

108 lines assets/components/catalog.vue
... lines 1 - 32
export default {
name: 'Catalog',
... lines 35 - 58
computed: {
categoryName() {
if (this.currentCategoryId === null) {
return 'All Products';
}
const category = this.categories.find((cat) => (cat['@id'] === this.currentCategoryId));
return category ? category.name : '';
},
},
... lines 70 - 105
};
</script>

Back up top, we can shorten <title-component> significantly: we only need to pass text set to categoryName.

105 lines assets/components/catalog.vue
<template>
<div>
<div class="row">
<div class="col-3">
<title-component :text="categoryName" />
</div>
... lines 7 - 9
</div>
... lines 11 - 19
</div>
</template>
... lines 22 - 105

Let's make sure this still works. Back at the browser, click "All Products". The title looks good! Try "Office Supplies" and... perfect!

Thanks to this, in product-show, we're free to pass whatever we want to the title, like :text="product.name".

43 lines assets/components/product-show.vue
<template>
<div>
<loading v-if="loading" />
<div v-if="product">
<title-component :text="product.name" />
</div>
</div>
</template>
... lines 10 - 43

I love that. And... it even works.

Next: let's bring this page completely to life with a full template and a nice, standalone color selector that we'll soon use to selected a product color before adding it to the cart.

Leave a comment!

Most Useful Newest Oldest
0
Login or Register to join the conversation
Cat in space

"Houston: no signs of life"
Start the conversation!

This course is also built to work with Vue 3!
Vue 2

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.1", // 5.15.1
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.3
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.2.0
        "eslint-plugin-import": "^2.19.1", // 2.22.1
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.12
        "vue-loader": "^15.9.1", // 15.9.4
        "vue-template-compiler": "^2.6.11", // 2.6.12
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}
Edit on GitHub
Previous Challenge
Next Chapter
userVoice