A little more about components in Vue - 05

Let's talk about Vue components

Before moving forward I want to talk a little bit more about the use of components since components are the key piece in all of this and it is what we are going to spend 99.9999% of our time on in this section, it is precisely creating components, so here we already have three components, notice that there is not much to look for based on the structure that I presented to you before, here in the components folder we have the components of our page, this is also a component, it is a component in Vue:

src\App.vue

<script setup>
import HelloWorld from '@/components/HelloWorld.vue'
***
<TheWelcome />

Components in Vue are nothing more than a file with the .vue extension that can range from a simple reusable button or not, to a complete page, and the components that come by default with the newly created application are a good example of this.

We see that, for example, the App.vue component is the page, but internally it uses other reusable components such as TheWelcome.vue and HelloWorld.vue:

import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
***
<WelcomeItem>
   <template #icon>
     <ToolingIcon />
   </template>
   <template #heading>Tooling</template>
***

The components have 3 main elements

Let's remember a little that the components indicated to you that they have three main pieces, several of which are optional: the html section, if I remember correctly which ones are optional, the ccs block.

Scope in CSS

The CSS block is usually not defined by me, at least because I usually use a global ccs unless I want something very specific for a component. Then I define a specific ccs for that component. The scope means that it does not escape from this component:

<style scoped>
.item {
 margin-top: 2rem;
 display: flex;
 position: relative;
}

That is to say that the style that we are applying here cannot be inherited in other components since in the end, regardless of whether we have this nice structure, everything, to put it colloquially, is spit out on the same page as you can see. So this style does not clash with the style of another component. Then we will do an experiment with this, but for now, stick with that and here you can see the trio of Marías.

  1. Ccs with media queries and whatever else you want to put there
  2. The Script block
  3. And the html

API Composition Mode and Options

There are also several ways to work with Vue here, the option API and the composition API.

These are the ways we have to create our components. I'm not going to go into much detail about this because I don't want to confuse you. I'm just presenting a little bit so you can keep an eye on it. Anything can be an extra class at the end. But at least for now I don't consider it appropriate. I'm mainly going to work with the so-called option API, which is the syntax you can see here, of this type, in which we place an Export default:

<script>
export default {
    created() {
        
    },
    ***
</script>

I will also explain this to you a little later and we define our variables here, but there is also a way that is, in quotes, more disorganized but also a little more expressive, which would be API composition:

<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'



const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
</script>

I'm going to open the page here in a new tab, click on it and notice that the definition here changes a bit where everything is placed at the same level.

Reactive variables

Note that here you can see the syntax here a little more reduced, for example to define the variables that are the reactive variables that I mentioned before. Note how they are being defined. I simply created it here as a constant and the ref:

const count = ref(0)
console.log(count.value) // 0

count.value = 1
console.log(count.value) // 1

It means that it will be reactive and therefore, every time we make a change to the variable, it will automatically be detected and applied wherever we are using it.

Relative Imports @ in Vue

What components do we have here, these that we have here, then I don't know if you remember but I had told you that the imports are defined here, a configuration that we have, I think it was here precisely this, this one that was for relative imports, which is not exactly this, I'm going to close this, what is the problem that we have with this syntax:

<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'

That we here in the components folder we can create other folders, it all depends on the application we are creating, if it is a medium-sized application you will want to hierarchize it through folders, for example you have to create a folder called page if each component is going to be represented by a page then another component another folder called I don't know helpers for help components a folder for the users module another for the dashboard another for the blog the blog turns out to have like three more subcategories, so you create more folders, then there are a lot of folders that you will then want to import and keep importing and this is going to be a mess because you will have to go browsing, so we will also present this a little later but it is basically what we have here with the at sign that should work:

import WelcomeItem from '@/WelcomeItem.vue'
import DocumentationIcon from '@/icons/IconDocumentation.vue'

This way, we can always import pointing to the components directory no matter where we define the component.

Here we have relative imports, which is by placing a piece of clothing here and automatically what the Ara does, which is the one we have here referenced in the byte, exactly this is what it does, it is an import, as they say, relative, always from the source folder, so it doesn't matter where the hell we are, it will always import by placing the Ara from source, it's that simple and it's the way we should always work, and it seems very strange to me that Vi hasn't placed that scheme from the beginning, of course, here is the Visual Studio code.

Componentes de Componentes

The interesting thing about components is their reuse, for example:

src/App.vue

<script setup>
import HelloWorld from '@/components/HelloWorld.vue'
import TheWelcome from '@/components/TheWelcome.vue'

And if we look at another component:

src/components/TheWelcome.vue

<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'

Other components are used internally.

Slot for reusing components

We have two ways to use the components, one is referencing them, straight up, that you are importing it, you are importing its content and that's it, but in this case you are defining the content that is available, but in this case you are customizing the content that is going to be output, therefore this is a kind of wrapper or wrapper and the content that counts is what you are going to place here, but even if it is you in this component you already have a certain structure defined, in this case it is the css that you have defined here, this html, and you are going to want to place the content specified here in certain key parts of your content, and here we have another concept which is the use of the slots, which we will present perhaps later if necessary, but in this case this is the default slot, why does it have that name, because it does not have a name, that is to say, in a component we can define several parts in which we want to place our content, suppose we have a list or detail page, let's go with a detail page, a detail page would have the content and the title, therefore you have two parts where you can customize the structure of that component. So you would have two slots one can perfectly be the default slot and another that is a slot with the title in which you indicate look here goes the title and here goes the content and it is basically so that it allows to respect the structure that you already have here arranged notice that if we see it here what it is doing now with this we close here it is indicating here we have another icon I am going to remove this for a moment to see which one it is to see if I find it here Here it is notice that here we have a part to indicate the icon we have another part to indicate the heer which is this one and finally content in this case this component which is the one that is being used here of welcom again doing the navigation we are here in App here we have it we are importing from Welcome:

<WelcomeItem>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template>

    Vue’s
    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
    provides you with all information you need to get started.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <ToolingIcon />
    </template>
    <template #heading>Tooling</template>

    This project is served and bundled with

Here you are using another component, that is to say, we have a component of a component component that in turn no longer has more components but can have more components and then with the structure that we are seeing here on the screen, each one of these is the same component that is the welcome item that we have here and that is why we see it several times repeated if we look for it here, notice that they will appear about 12 times, removing this one, it would be 10 times, opening and closing would be five times, therefore on the page there should appear five icons listed here, let's see one, we have two, we have three, we have four and we have five, there you can see it, then this component is the one that defines that nice structure that you can see here on the screen, exactly this that we have here and that is what it is basically for. Then as we have several parts where we want to place the content, as who says dynamic, the slots are defined so that it knows exactly where it can be used. So with this we saw two uses of the components, on the one hand, a component in which it is simply used and that's it, just as you are seeing here, that it is imported and nothing else, then any change that you want to make to this component you have to do it. write here and on the other hand We also have a more structured component in which we can indicate a pretty nice structure like the ones we are seeing here Armed with ccs and javascript Well css and html and of course it can also have javascript in case it is necessary to do any action but in this case it is not necessary and here you define the html structure and you indicate which are the key parts that the user will be able to change which in this case is Through the slots And notice that the names are the same as those used here, the icon, the details one that we have, let's see, dets is a class Sorry, the hiden one here, the hiden one and finally the default one that would be this one that we have here again, this would be the content that would be placed here, this would be the content that would be placed here and this would be the content that is placed here, it's that simple, for the rest, I think you can associate it a bit, very similar to what we did with codiner 4 with the templates, it is very similar, only in this case the term is the slot one like this I don't want to confuse you any more, but when you implement this we will really be able to understand it more easily, so nothing more to say, I'm going to give it control Z here so that this stays alive, no pending error should appear here, and without further ado, let's move on to the next class.

- Andrés Cruz

En español

This material is part of my complete course and book; You can purchase them from the books and/or courses section, Curso y Libro CodeIgniter 4 desde cero + integración con Bootstrap 4 o 5 - 2025.

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.

!Courses from!

10$

On Udemy

There are 0d 13:48!


Udemy

!Courses from!

4$

In Academy

View courses

!Books from!

1$

View books
¡Become an affiliate on Gumroad!