Pluri45Introduction
Vuejs has been a top choice for developers for reasons that it is simple, lightweight , and easy to learn when compared to other libraries . Its files are organized as Single File Components (SFCs) that include template, script, and style sections. Vuejs is built to be flexible and capable of helping you build and scale your projects. In this article, you will learn some of the concepts you will come across while building with Vue.js.
Concepts
Options and Composition Api
APP.vue
On Mounted
View Models
Router & Router-view
1. Options and Composition API
The Options and Composition API are different approaches to how you structure the logic of your Vuejs code. As the name implies, Options API organizes the logic of your code options. When you want to define new methods, you simply add it to the structure of the code, providing a new method (option) to be used in your code. The sample code below provides an example:
export default {
data() {
return {
name: 'john',
status: "pending",
tasks: ['Task one', 'Task Two', 'Task Three'],
link: 'https://google.com'
};
},
methods: {
toggleStatus() {
if (this.status === 'active') {
this.status = 'pending';
} else if (this.status === 'pending') {
this.status = 'inactive';
} else {
this.status = 'active';
}
}
}
};
In the options API, the reactive state is defined by data(You can name it whatever you want but keep it consistent ). The method returns an object, all these are within the export default component. By Exporting a component, you can make use of the method anywhere it is imported in your coding environment.
If you wanted to write the code above as a composition api, you will do the following:
<script lang="ts" setup>
import { ref } from "vue";
import { RouterLink } from "vue-router";
import BounceLoader from 'vue-spinner/src/BounceLoader.vue';
import SingleNowPlaying from './singleNowPlaying.vue';
// Reactive state variables
const name = ref('john');
const status = ref('pending');
const tasks = ref(['Task one', 'Task Two', 'Task Three']);
const link = ref('https://google.com');
// Method for toggling status
const toggleStatus = () => {
if (status.value === 'active') {
status.value = 'pending';
} else if (status.value === 'pending') {
status.value = 'inactive';
} else {
status.value = 'active';
}
};
</script>
The Composition API was written to appeal to React developers who want to use Vue. When you compare the Options API code to composition API, you will observe that the setup was defined along with the script.When you import the methods/ components you want to use, you can directly define your functions in your code without exporting them.
2. Router & Router-view
The Router comes with installing the Vue Router Package and it helps you manage routes in your application. Here, your components are connected to URLs that will be displayed when visited on the browser.The Router-view serves as a portal to render the component of an initiated route. The following code sample shows how the Router works.
import { createRouter, createWebHistory } from 'vue-router'
import homeview from '../views/homeview.vue'
const router = createRouter({
history: createWebHistory('/Movie-database/'),
routes: [
{
path: '/',
name: 'home',
component: homeview
}
]
})
export default router;
From the code above, you import the component or view files you want to connect to a URL. The path is the address that shows up in your browser, the name is a class that helps you target a specific component outside your route folder.
3. On Mounted.
OnMounted is a lifecycle hook that monitors when a component is ready for use(mounted). You will typically make use of the onMounted hook for Fetching data from an API.
onMounted(async () => {
try {
const response = await axiosClient.get('/movie/now_playing');
movies.value = response.data.results;
console.log(movies.value);
} catch (error) {
console.error('Error fetching movies:', error);
} finally {
isLoading.value = false;
}
});
4. View Models(V-model)
V-model create a two-way binding between a form input element like and a data property in your component. This means that when the user changes the value of the input, the data property is updated instantly, and when the data property changes, the input's value is updated as well. Just like the code below:
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2"> Location </label>
<input
type="text"
id="location"
v-model="location"
name="location"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="Company Location"
required
/>
</div>
<script>
import { ref } from 'vue';
export default {
setup() {
const location= ref('');
return {
location
};
}
}
</script>
5. App.vue
The App.vue file loads and displays all the files in your application to the user. You can state the Navbar component and use to load up the rest of the files in your application.
<script setup lang="ts">
import {RouterView} from 'vue-router';
import Navbar from './components/navbar.vue';
</script>
<template>
<div>
<Navbar/>
<RouterView/>
</div>
</template>
Conclusion.
In this article, you learned about the fundamental principles of building with Vue.js, the Options and composition APIs being one of the most important amongst them. For more information about the vuejs framework, you can check out the official documentation here: documentation .
