SymfonyCasts stands united with the people of Ukraine
If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeThe products.vue file is known as a component. And, as we can see, a component represents a set of HTML, complete with CSS for that HTML and even behavior for those elements, which we'll learn about soon.
In the same way that HTML elements can be placed inside of each other, Vue components can also be nested inside of each other. For example, we could move an entire section of HTML into another .vue file and then include that component in the same spot.
And... this is often a great idea! Because, if we built our entire app in this one file, it would become huge and complex!
We have this same problem in PHP: if you have a large or complex function, you might decide to extract part of it into a different function. You might do this because you want to re-use the extracted code or just because separating things keeps your code more readable and better organized.
As a general rule, if an area of your DOM has (1) special functionality, (2) needs to be reused or (3) would just make the original template easier to read, you should consider extracting it into its own component.
It's not really very complex, but let's pretend that we want to reuse the "legend" functionality in other places and pass different text each time we use it.
Let's go! Inside the js/ directory, create a new sub-directory called components/. I'm not going to put this new component in pages/: pages/ is sort of meant to hold "top-level" components, while components/ will hold everything else: Vue components that contain little bits and pieces of HTML and that, in theory, could be re-used.
Inside components/, create a new file called legend.vue. Start the exact same way as before: add <template> and, inside, copy the <span> from products.vue and paste. To keep things simple, I'm going to temporarily copy the old shipping message and hardcode it: the component will start off completely static.
| <template> | |
| <span class="p-3"> | |
| Shipping takes 10-12 weeks, and products probably won't work | |
| </span> | |
| </template> | |
| ... lines 6 - 12 |
The other tag we need is <script> with export default {}. The only option that we should always have is name. Set it to Legend.
| ... lines 1 - 6 | |
| <script> | |
| export default { | |
| name: 'Legend', | |
| }; | |
| </script> |
Component... done! Using this in the Products component is a three step process. First: inside the <script> tag - just like we normally do in JavaScript - import it: import LegendComponent... - we could call that anything - from '../components/legend'.
| ... lines 1 - 55 | |
| <script> | |
| import LegendComponent from '../components/legend'; | |
| ... lines 58 - 69 | |
| </script> | |
| ... lines 71 - 85 |
Second, to make this available inside the template, add a new option called components. As I've mentioned, there are a number of options that you can add here to configure Vue, like name, data() and components. There aren't a tons of them - so don't worry - and we'll learn the most important ones little-by-little.
| ... lines 1 - 58 | |
| export default { | |
| ... line 60 | |
| components: { | |
| LegendComponent, | |
| }, | |
| ... lines 64 - 68 | |
| }; | |
| ... lines 70 - 85 |
If we stopped now, nothing would change: this makes LegendComponent available to our template, but we're not using it. In fact, that's why ESLint is so mad at me:
The "LegendComponent" has been registered but not used.
The last step is to go to our template, remove the old code, and use the LegendComponent as if it were an HTML tag. Type <. You might be expecting me to say <LegendComponent/>... after all, PhpStorm is recommending that. Instead, use the kebab-case option: <legend-component />.
| <template> | |
| ... lines 2 - 47 | |
| <div class="row"> | |
| <legend-component /> | |
| </div> | |
| ... lines 51 - 53 | |
| </template> | |
| ... lines 55 - 85 |
Using LegendComponent would have worked, but when we add a key to components, like LegendComponent, Vue also makes it available in its kebab-case version: so legend-component. It does that so our template can look cool by using the HTML standard of lowercase and dashes everywhere.
Anyways, let's try it! Move over, refresh and... it works! But the real prize is over on the Vue dev tools. Nice! Our component hierarchy is growing! We now have a <Legend> component inside of <Products>.
Of course... its text is now static... so we also kinda took a step backwards. Next, let's learn how to pass info from one component into another with props.
Hey Alexei,
We're sorry to hear you have some troubles with running this example! Do previous examples work for you (examples in previous chapters)? Could you give us a little bit more context? What exactly are you doing? Do you see any errors in Console tab of Google Chrome? We will be happy to assist you if we know a little more about your problem.
Cheers!
Hi, after creating Legend component I'm getting:<br />[Vue warn]: Failed to resolve component: legend-component at <App><br />
Is this issue with vue 3 or am I doing something wrong?
Hey Trrtr,
Hm, my guess is that you need to define your "legend-component" component before you initiate your main instance.
I hope this helps!
Cheers!
What does it mean to define it before main instance? Should I add something to products.js?
Now it looks like this:
`
import { createApp } from 'vue';
import App from './pages/products';
createApp({
data: App.data,
render: App.render,
}).mount('#app');
`
My products.vue (without template), in which I call <legend-component />:
`
<script>
import LegendComponent from '../components/legend';
export default {
name: 'Products',
components: { LegendComponent },
data() {
return {
legend: 'Shipping takes 10-12 weeks, and products probably won\'t work',
};
},
};
</script>
`
And a legend.vue:
`
<template>
<span class="p-3">
Shipping takes 10-12 weeks, and products probably won't work
</span>
</template>
<script>
export default {
name: 'LegendComponent',
};
</script>
`
Everything from products.vue renders correctly except legend-component :(
Hi trrtr!
I'm not sure why would you get such an error in Vue 3. Does it work with Vue 2?
I'd try to instantiate my App as follows:
<blockquote>`
createApp(App).mount('#app');
`</blockquote>
And see if that makes it recognize App's child components!
No problem! Looking back at the issue, I know what the problem was: When you do it the first way, you're only passing data and the render function to the Vue engine, not the entire App object. Thus, once you start adding properties to App, those get lost in the way, therefore, you need to change the syntax and just give Vue the entire thing!
// package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.30.0", // 0.30.2
"axios": "^0.19.2", // 0.19.2
"bootstrap": "^4.4.1", // 4.5.0
"core-js": "^3.0.0", // 3.6.5
"eslint": "^6.7.2", // 6.8.0
"eslint-config-airbnb-base": "^14.0.0", // 14.1.0
"eslint-plugin-import": "^2.19.1", // 2.20.2
"eslint-plugin-vue": "^6.0.1", // 6.2.2
"regenerator-runtime": "^0.13.2", // 0.13.5
"sass": "^1.29.0", // 1.29.0
"sass-loader": "^8.0.0", // 8.0.2
"vue": "^2.6.11", // 2.6.11
"vue-loader": "^15.9.1", // 15.9.2
"vue-template-compiler": "^2.6.11", // 2.6.11
"webpack-notifier": "^1.6.0" // 1.8.0
}
}
I am using vue 3 and just got the error with the component not being resolved as reported previously by @Trrtr. The solution createApp(App).mount('#app'); should be actually added in the tutorial especially because in one the previous chapters the following is advised for vue 3 which with this chapter will be missing some key probably and that is why it is not complete anymore.
So, for anyone using Vue 3, this won't work anymore here with the component:
const app = createApp({
data: App.data,
render: App.render,
});
Instead use sth similar to:
const app = createApp(App).mount('#app');
The part, setting const app is obviously optional and only if you want to have access to app from e.g. your web tools console.