Getting started with Vue 3 and CodeIgniter 4

We will give an Introduction to Vue 3.

Before starting to develop our application in Vue that will consume the Restapi that we have here implemented in CodeIgniter 4 I wanted to talk a little about the technology that we are going to use that as I mentioned before was Vue, you can use Vue, you can use R, you can use Angular, you can use any other if you already master one of them, if you don't want to learn Vue, you can perfectly create that integration layer. In summary, what we are going to do are requests through Axios, which I will explain a little later, and build certain components, certain blocks of HTML for the list, some buttons for the rest of the actions to delete and so on, but in essence that is what I use.

Vue for creating SPA websites

Vue because as I mentioned at the beginning it is a very simple technology it is a web technology therefore it fits completely with frameworks such as coding nider even though it is a client web technology it is still a web technology and it is a simple technology to understand if we compare it with others and even though it is already in this way we also learn a technology as in this case it is Vue then Vue obviously also has certain advantages with respect to for example read or angular as I was telling you this by the way it is a fragment of my book as you can see that it has an additional cost and I use it just like the CodeIgniter book that I have here to present certain theoretical aspects or certain developments that we are going to carry out then basically the advantage that Vue or similar frameworks give us like read or angular is the fact that we do not have to change the doom automatically, that is to say with the DOM I mean the web page when we change a state when we change a status for example a user goes from not authenticated to authenticated we usually put some more options in the menu we remove the login button none of those actions we have to do manually and more than this we can also build a spa type website which means that through data, data that we call reagents that are tied in a way to the interface as we will see later when we change this data programmatically, that is, through the Script, these changes are automatically made or are reflected on the screen and that is basically a spa type website. In the same way, here you can pause the class and read a little of what I am commenting on here and obviously as I mentioned at the beginning, other frameworks such as React, Angular, can do the same thing but in this case it is much easier to understand, much lighter and much more friendly when starting with a technology like the one mentioned and from here we have many options, for example, the use of prop that allows us to modularize components. The word component is also something that you will hear a lot since you saw it is based on components and components are nothing more than small pieces of code that perform a specific functionality, for example it can be a button, then we can take advantage of this button to do certain actions such as delete, it can be directly a modal, it can be directly a table or a list, it can be many things. We will be creating a few as we go along, but just stick with that.

A component is a small piece of code that can be easily reused. It can be generic, as I mentioned, like a button, and then we implement the action depending on what we need.

A component can also be something a little more specific, for example, movie listings that we can then place anywhere in the application, it's that simple.

Props, Observers and more

We also have many features in Vue that we will introduce little by little, such as the use of observers or washes that also allow us to observe changes in reactive data, in this case it is focused from the Script, that is, not from the html, and I will also explain this a little later on. How a component is formed in Vue, but what about a we tcpa was what I was telling you, which was the doom, the html doom, which again is the entire page. When we change reactive data, that is, a variable in javascript, it automatically changes from the html. In this case, this observer that we place here is on the script side. You may not follow me much, it does not matter if you still do not understand the concept very well. Remember that you can also watch this video a little later, but just keep in mind that it is a framework, a client-side javascript framework that allows us to create sps type websites, that is, websites that in a simple, practically automatic way, we can change the state of multiple html elements, it all depends on how we implement it as we change certain values ​​of some variables. set of variables that we are also going to see how we are going to define so that is basically nothing. You can also pause and read here in case you still have some doubts

Again, it is not necessary to have any knowledge of Vue, we are going to see everything from scratch, but in case you want to go deeper, remember that I also have here in this case I only have a book associated with the technology and on YouTube I also have several videos, a playlist to start developing in Vue. So, to also get into context a little bit, to use Vue, we basically have two ways: Node and CDN.

https://vuejs.org/

Script, HTML and CSS component bases

A component consists of three elements: the HTML, which is usually Yes or Yes, which is a small piece of HTML, as I mentioned before, in this case it is an incremental button, we have the Script part, which in this case is not displayed because it is a very simple structure, that is a little optional, and also the style part, which is quite optional since it usually takes the style from a parent sheet, although you can also place it directly in the component, and this is the start of the application, that is, in this case we always have a root part of the application in which we start Vue:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

In the previous example, when we click on it we see that it will automatically be reflected in the HTML.

Node and NPM

Remember that node has two very important elements, namely no, which is the javascript execution environment, which is node, and npm, which stands for node package manager, that is, node package manager with which we can install packages, as in this case it is Vue.

If nothing appears, it will appear as Command not found:

zsh: command not found:

Or something like that try to restart your computer just in case here you see for example this exactly the command not found try to restart your computer and that would be practically all and always pending when you are installing if a chat appears in which it indicates that if you want to add it to the System pack or something like that mark it obviously so that you can then use it from the terminal again if in the terminal or when sorry when you are installing it appears as in the case of python you see a check that indicates that if you want to add no to the system pack which I don't know if it asks check it there because it will be necessary because if not you will not be able to use it this way and you will have to reinstall it.

- 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 03:50!


Udemy

!Courses from!

4$

In Academy

View courses

!Books from!

1$

View books
¡Become an affiliate on Gumroad!