Listing component for our app in Vue 3: Base structure - 13

▶

We've already completed the introductory phase, that is, we've introduced some of the things we're going to use: configurations in CodeIgniter 4, creating the application in Vue, getting to know its ecosystem a little, how to make requests, how a component is structured... We've already covered all of that before.

I know it was a bit abstract because we didn't jump directly to the implementation, but it's still there. The idea is that if there's anything you don't understand—for example, something specific to Vue—you can go back to the previous classes, where I explained a bit about Vue and how to use its components. Keep in mind that those classes will always be available for reference when you need them.

Creating the First Component in Vue

Now, let's create our first component in Vue. In this case, it will be the state component, which is practically screaming at us to create it.

Inside the components folder, I'm going to create an additional folder for movies. I think, at least for now, we'll only work with movies. So, I'll create a CRUD folder, and inside it, Movies. From there, I'll create the component and name it ListComponent.vue. I always like to include "Component" in the name to identify it as a component.

Component path:

src/components/CRUD/Movies/ListComponent.vue

This component consists of three elements: the template, the script, and the style. The style is quite optional; at least I don't usually define it much, as I use a global style, which I find much more convenient.

Here we place the data block:

<template>
    
</template>
<script>
export default {
    
    data() {
        return {
            movies: []
        }
    },
}
</script>
<style>
</style>

Snippets, Options vs. Composition API, and Preferences

Remember, as I mentioned before, I'm going to rely heavily on snippets. I have these two extensions that help me a lot. We're going to require a variable called movies, which will allow us to iterate here.

This is an important point: the syntax can vary. Currently, Vue promotes the use of the Composition API, but here we're using the Options API. You can also see this in the official documentation. I don't want to emphasize this too much; I'm simply mentioning it because, by default, Vue is configured with the Composition API.

Personally, I feel more comfortable with the Options API. I understand that Composition is more expressive, but I find it uncomfortable seeing so many things defined at the same level. It's a bit visually jarring. That's why I prefer the Options API, as it seems more structured to me. Although the syntax is longer, it seems clearer to me. But that's a matter of taste.

Executing logic when the component is mounted

An important difference is that here we're going to require a method to be executed when the component is mounted. For now, we don't have one, since before everything was executed in the script, which was a bit more disorganized, as I mentioned. But now that won't be the case. Let's see how it's done.

Integrating the component into App.vue

As I mentioned, this will be our startup component:

<script setup>
import ListComponent from '@/components/CRUD/Movies/ListComponent.vue';
</script>


<template>
  <ListComponent />
</template>

File cleanup, import, and basic structure

I'm going to leave just one import for quick comparison. I'm going to remove the rest. I'm also removing the styles, since I won't be using them.

Now, let's import the component we just created. If the self-help method works for you, great. We add:

import ListComponent from '@/components/CRUD/Movies/ListComponent.vue';

Notice that it already accepts it. Here we use the @ symbol, which acts as a shortcut to the src folder. You can see this in the configuration, but generally it doesn't need to be changed. From there, look in components/CRUD/Movies.

Note: Keep in mind that you must add the .vue extension. In an earlier stage of Vue, it sometimes worked without the extension, but with recent updates, it's now mandatory.

Adding the Base Content and Display

Here we'll simply use it. We have two possible syntaxes (although the one you see here isn't correct; I think Copilot went too far). Let's add it correctly. For now, I'll add anything to the template, just to validate that it works:

<h1>Hello, component ready</h1>

I still see the screen go black. I don't know where it's getting that style from, but I'll check it out. Maybe something was installed in debug mode; I hadn't seen that before. Still, it doesn't affect the example.

We can see that it's working correctly. And the advantage of components is that we can use them as many times as we want. Although, in this case, it wouldn't make much sense since it's a list and is usually displayed only once.

Anyway, look how nice: now Vue tells you directly what the component is and everything.

Alternative use in App.vue
Another way to load them is useful.

Using lowercase notation:

src/App.vue

<template>
  <!-- <ListComponent /> -->
  <!-- <list-component />
  <list-component>
  </list-component> -->
</template>