VUE

Vue is a progressive framework for building user interfaces. It is designed to be approachable and flexible, and can be used to create everything from simple websites to complex web applications.

Getting Started

To get started with Vue, you can follow these steps:

Documentation

The Vue documentation is available online at vuejs.org. This documentation includes guides, tutorials, and reference material for learning Vue and using it effectively.

Vue CLI

Vue comes with a command-line interface (CLI) tool that can help you scaffold new projects, add plugins, and perform other common tasks. You can install the Vue CLI using the npm install -g @vue/cli command.

Composition Api

Vue 3 Composition API is a new way of writing Vue components that was introduced in Vue 3. It provides a set of functions and APIs that allow you to organize your component code in a more flexible and reusable way.

In the Composition API, you write your component logic as a series of functions that can be reused across multiple components. These functions can be composed together to create more complex behavior, and they can be easily tested in isolation.

Overall, the Composition API provides a more flexible and powerful way of writing Vue components that can make your code easier to maintain and reuse.

Composition Examples

Below are the templates and examples from Vue3 Composition Api (script setup).

NOTE: If you cannot start some of the project be sure that node_modules is properly installed. To install node_modules properly, run the following command in the project’s folder.

npm install

Options Api

The Options API is a way of defining Vue.js components using a simple JavaScript object that specifies various options such as data, computed properties, methods, and lifecycle hooks. This is the traditional and simpler way of defining Vue components, and it is still supported in the latest version of Vue.

Overall, the Options API is still a useful and valid approach for building Vue 3 components, but the Composition API provides more advanced features and flexibility.

Options Examples

Vue Router

Vue Router is a powerful routing library for Vue that allows you to create complex, multi-page applications. It provides features like nested routes, route guards, and dynamic route matching. You can learn more about Vue Router in the official documentation.

Pinia

Pinia is a state management library for Vue. It is inspired by Redux, but it provides more features and flexibility. Pinia works for both Vue 2 and Vue 3 and doesn’t require you to use the composition API. The API is the same for both except for installation and SSR. You can learn more about Pinia in the official documentation.

Vuelidate

Vuelidate is a validation library for Vue. It provides built-in validation rules and reactive validation.

Vuelidate is considered model-based because the validation rules are defined next to your data, and the validation tree structure matches the data model structure. You can learn more about Vuelidate in the official documentation.

npm install @vuelidate/core @vuelidate/validators

<script setup lang="ts">
import { reactive } from 'vue' // "from '@vue/composition-api'" if you are using Vue <2.7
import { useVuelidate } from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'

const state = reactive({
  firstName: '',
  lastName: '',
  contact: {
    email: ''
      }
})
const rules = {
  firstName: { required }, // Matches state.firstName
  lastName: { required }, // Matches state.lastName
  contact: {
    email: { required, email } // Matches state.contact.email
  }
}

const v$ = useVuelidate(rules, state)
</script>

<template>
  <div :class="{ error: v$.firstName.$errors.length }">
    <input v-model="state.firstName" />
    <div class="input-errors" v-for="error of v$.firstName.$errors" :key="error.$uid">
      <div class="error-msg"></div>
    </div>
  </div>
</template>