Since Vue is a component-driven architecture, we're technically going to be working with components pretty much every single guide, so what I want to do right now is really take a deep dive and drill down into what components are and how you can think about them.

I have the design open right now because I think having a visual really helps to solidify exactly what a component is and how they can be used. This may look like just a regular web application, you have a title with some text here, then you have a login element and then a registration element.

Now, we already know that the entire application is a component, so DevWorkflow is going to be a component called App, and all of the other components are going to be nested inside of there. We could technically make this title and text a component. It would be what is called a presentation component, because this doesn't do anything. It doesn't have to react to changes, it doesn't have form inputs, it doesn't need to connect to an API, or anything like that.

But, we still could make it a component, and we're going to do that and then also right here we have our login. This entire card is going to be its own component and then it's going to have components inside of that. If you really wanted to become incredibly specific, you could make things like these links or buttons their own components.

I know that may sound a little bit weird if you've never done it before, but it actually leads to a much more logical approach as you're building out applications. Because instead of thinking of applications as one giant piece, or a set of pieces that you put together, you instead start to segment it out and you start to separate all the concerns so that you can say, "Okay, yeah. I need to have a button here." So, I'm just going to call a button component and I'm going to tell it what type of text it should say and then we can decide what the actions are going to be, that kind of thing.

Even if this sounds a little bit weird, that's perfectly fine. Hopefully the more times we practice it, it's going start making more and more sense. So, make sure you have the application running, and I'm going to open Visual Studio Code. We have our dashboard here, and let's first add that text.

So, we're going to say DevWorkflow, and then we're going to have some paragraph content. Let's start by adding it directly into the dashboard. That's going to be an h1 tag, so that's going to be a heading tag, and we'll say that this is DevWorkflow, and then close off that h1 tag, and then here for the paragraph, I'm going to just put some lorem ipsum text here.

So, I can say p>lorem, and I believe if I give a number here, it will give me how much code I want. This is a tool called Emmet, I also have a guide for Emmet if you're interested, I'll put a link in the show notes for you.

If you type this and hit tab, you can see that gives us some nice placeholder text.

So, we can have that one, and then p>lorem, and this one will say we want 20 words, so we'll say 20 just like that, and that is all we need. That is going to give us the base content that we want there in the left-hand side, and you can see that this is now showing up.

But, I told you that we're going to get into components, so let's actually break this out into its own presentation component. We're going to talk about what a presentation component is versus some of the other types of components that are out there.

So, let's open up our file system, here, and click on components, make sure it's open. Then, inside of here, just say New Folder, and here I'm going to just say, let's call it a content directory, so this is going to say content. Like I told you earlier when we were walking through the file system, none of the names here matter except from a convention perspective.

So, you could technically name this directory asdf, and you would still be able to call it. Now, I recommend if you ever do that that you are not working for any company or anyone that would actually look at your code, because that would be a really bad practice.

So, I'm just going to say content, because this is a content-related component. Anytime that we're going to have content that we want to call from other views or other components, then we can place all of those components here. Inside of here, let's say that we want to call this HomepageContent.vue, and now here we can add all of that content.

So, let me close this, and copy, or I should say, cut, all of that code out, and now we're going to create a template tag. I'm going to just say template, wrap it up and then close it off just like this, and then paste in all of that code.

Now, you're going to get an error if you do it exactly like this, and I wanted to point this out, because this could be a little bit tricky if you've never seen it before, but, the way that the template tag works inside of Vue, and if you've also worked with React, this is actually identical to the way it works in React as well, is that whenever you have a template tag, you need to wrap it up in a single element. Because this is a single component, it can't have a h1 tag followed by a paragraph followed by another paragraph.

Instead, it needs to have a single div that is going to wrap all of it up. You can see when I add that, now it is working.

HomepageContent.vue

<template>
  <div>
    <h1>DevWorkflow</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas error sequi pariatur adipisci nisi enim excepturi consequuntur, vitae ipsum porro!</p>
  </div>
</template>

I'm going to save that file. I do not need to add in any of the other content here, so let's just save it like that, and now, I'm going to import it. Let's say that I want to have HomepageContent, and then close off the tag, this is called a self-closing tag, and this is the format you want whenever you're working with any kind of components.

Inside the script, we're going to import it. So, I'm going to say import HomepageContent from... now, we need to provide a path. One thing that I love about Vue is how it allows you to very easily get to the root of your project. If you've ever worked with other frameworks like React or some of those, it can be a real pain to do things like this, where you have to say slash slash, and then keep on going back until you find the exact perfect path relative to where you are.

So, right now, for example, we're in the dashboard. We'd have to do two of those dots to jump back into the source directory, and then we'd have to jump through the components, content, until we grabbed the home page content. But what Vue does, is it gives us this little at symbol, and what that is going to do is that means it's going to start at the root, at the spot where the SRC directory is, and then you can say @/ and now I can say components/content/HomepageContent, and that is it.

import HomepageContent from '@/components/content/HomepageContent';

So now, if I hit save, I can come down here inside of export default, and at the very last curly brace, right before the closing one, add a comma, and now inside of here, we have to list off our components. So, I'm going to say components, and then components is an object, and you are going to pass in the component that we want to use.

This is called registering the component, you have to tell Vue exactly which components you want to have access to, and then call from right here. So, if you hit save on all those files, and switch back here, you can see that this is still working.

Now because this is a presentation component, this means it has no logic. This doesn't do anything except contain some items we want to present to the users, that's the reason why we didn't have to add the script tag, we didn't have to give it a formal name. We didn't have to do anything like that, it just works, it's us calling some HTML so that we do not have to have a bunch of ugly HTML right here inside of the Vue.

Now, I'm going to type command+option+j to pull up the JavaScript console, here, and you can see it says Unknown custom element HomepageContent, and did you register it?

Let's hit clear here, hit refresh again, and you can see it's working. That error that you just saw, there, that was because the way that the console works is as you are saving. So when we imported HomepageComponent and then called it, before I added this and registered the component, the console was keeping track of all the errors. But, I cleared it, and so now it's all working.

Let's just do a quick review on what we did. We created a presentational component, this is pretty much the most basic component you could ever have. And then from there, we called it directly inside of our dashboard, so we called it from what is called the parent component.

So, dashboard in this case is called the parent component, the HomepageContent component is called the child component, so that is the proper naming. Then we imported the component directly from the file, and then we registered it. So, those are the three things you need to do anytime you are going to create a component.

So, great job if you went through that. You now know how to create child components and call them from a parent.

Resources

• Source Code
• VC Code Emmet Shortcuts