Семь супер практичных плагинов и библиотек Vue 3

Vue 3 — это мощная среда JavaScript, которая позволяет нам создавать невероятные пользовательские интерфейсы и приложения. С плагинами и библиотеками, упомянутыми в этой статье, мы можем упростить рабочий процесс и добиться лучших результатов за меньшее время.

Хотите создавать потрясающие приложения Vue.js в 2023 году? Если ваш ответ ДА, обязательно попробуйте 7 плагинов и библиотек Vue 3, описанных в этой статье. Эти невероятные плагины и библиотеки могут добавлять в приложения потрясающие функции и возможности без написания большого количества кода.

Эти плагины и библиотеки включают в себя анимацию, аутентификацию, оптимизацию производительности и т. д., поэтому, если вы хотите создавать потрясающие веб-приложения с помощью Vue 3, не пропустите!

1. Верифицируйте

Адрес плагина: https://vuetifyjs.com/en/

Vuetify — это мощная и гибкая библиотека пользовательского интерфейса Vue.js, которая помогает создавать красивые и отзывчивые пользовательские интерфейсы для веб-приложений. Vuetify предоставляет набор готовых компонентов и стилей пользовательского интерфейса, которые экономят время и силы при создании приложений Vue.js.

С помощью Vuetify вы можете легко создавать адаптивные макеты, типографику, значки, кнопки, формы, таблицы и многие другие элементы пользовательского интерфейса без написания всего CSS и HTML с нуля. Библиотека также включает расширенные функции, такие как директивы, настройка тем, интернационализация и специальные возможности, помогающие создавать более интерактивные, инклюзивные и удобные для пользователя веб-приложения.

Установить

# create new Vue.js Project with Vuetify
yarn create vuetify

# add to an existing Vue.js project
yarn add vuetify@^3.1.5

Применение

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
  components,
  directives,
})

createApp(App).use(vuetify).mount('#app')

Настроив Vuetify в нашем проекте, давайте добавим в наше приложение несколько основных компонентов Vuetify.

Сначала добавьте следующий код в файл main.js или main.ts.

import * as components from 'vuetify/components'

Теперь вы можете использовать компоненты Vuetify в своих собственных компонентах.

//button
<v-btn>
  Button
</v-btn>

//an autocomplete extends a select input with autocomplete features
<v-autocomplete
  label="Autocomplete"
  :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
></v-autocomplete>

Вы также можете прикреплять директивы к компонентам с помощью Vuetify. Давайте также добавим следующий блок кода в файл main.js или main.ts:

import * as directives from 'vuetify/directives'

Теперь давайте попробуем несколько команд:

Команда v-intersect использует Intersection Observer API. Он предоставляет простой в использовании интерфейс для определения того, когда элементы видны в окне просмотра пользователя.

//v-intersect 
<v-card
     v-intersect="onIntersect"
     class="mx-auto"
     max-width="336"
  >
    <v-card-title>Card title</v-card-title>
    <v-card-text>
      This is the card's subtext
    </v-card-text>
  </v-card>
...

<script setup>
import {ref} from 'vue'
const isIntersected = ref(false)

const onIntersect = (isIntersecting, entries, observer) => {
      isIntersected.value = isIntersecting
    },
</script>

Директива v-click-out вызывает функцию, когда щелкают что-то за пределами целевого элемента. Используется внутри таких компонентов, как v-menu (компонент меню Vuetify) и v-dialog (компонент диалога Vuetify).

<template>
  <v-app>
    <v-card
      v-click-outside="onClickOutside"
      :color="active ? 'primary' : undefined"
      :dark="active"
      class="mx-auto"
      height="256"
      rounded="xl"
      width="256"
      @click="active = true"
    >
      <div 
     class="text-h6 text-md-h4 fill-height d-flex align-center justify-center">
        {
   
   { active ? 'Click Outside' : 'Click Me' }}
      </div>
    </v-card>
  </v-app>
</template>

<script setup>
import {ref} from 'vue'

const active = ref(false)

const onClickOutside = () => {
      active.value = false
    },
  },
</script>

2. Использование Vue

Адрес плагина: https://vueuse.org/

VueUse предоставляет набор из более чем 200 основных служебных функций для взаимодействия с различными API, такими как браузер, состояние, сеть, анимация, время и т. д., которые можно легко импортировать и использовать в компонентах Vue.js. Таким образом, вы можете добавлять такие функции, как доступ к локальному хранилищу, использование полноэкранного режима, нажатие внешних элементов и т. д. без написания слишком большого количества кода. Просто объедините импорт, и вы готовы к работе.

Установить

npm i @vueuse/core

Применение

// reactive localStorage 
<script setup lang="ts">
    import { useStorage } from '@vueuse/core'
    const state = useStorage('my-store', { hello: 'hi', greeting: 'Hello' })
</script>

Приведенный выше код обеспечивает гибкий способ хранения данных в браузере localStorage или sessionStorage. Таким образом, вы можете видеть обновленные данные в локальном хранилище и хранилище сеансов в режиме реального времени.

//create a draggable element
<script setup lang="ts">
    import { ref } from 'vue'
    import { useDraggable } from '@vueuse/core'

    const el = ref<HTMLElement | null>(null)

    // `style` will be a helper computed for `left: ?px; top: ?px;`
        const { x, y, style } = useDraggable(el, {
      initialValue: { x: 40, y: 40 },
    })
</script>

<template>
  <div ref="el" :style="style" style="position: fixed">
    Drag me! I am at {
   
   {x}}, {
   
   {y}}
  </div>
</template>

Приведенный выше код делает элемент el перетаскиваемым, а также предоставляет информацию в реальном времени о положении элемента на экране x и y при его перемещении.

//Detects that a target element's visibility.
<div ref="target">
  <h1>Hello world</h1>
</div>

<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )

    return {
      target,
      targetIsVisible,
    }
  },
}
</script>

В приведенном выше коде событие запускается, когда связанный элемент становится видимым на экране. Это очень удобный прием для создания триггера анимации.

В VueUse есть много вариантов использования композиции, и если вам интересно, вы также можете углубиться в это.

3. vue-тост-уведомление

Адрес плагина: https://github.com/ankurk91/vue-toast-notification

Важность показа уведомлений пользователям хорошо известна. Уведомления предоставляют пользователям мгновенную обратную связь об успехе или неудаче их действий, делая пользовательский интерфейс более интуитивно понятным.

Плагин vue-toast-notification упрощает процесс отображения уведомлений в приложениях Vue.js. Он предоставляет простую в использовании и настраиваемую систему уведомлений, которую можно быстро интегрировать в проекты.

Установить

npm install vue-toast-notification@^3.0

Применение

import {createApp} from 'vue';
import ToastPlugin from 'vue-toast-notification';
// Import one of the available themes
//import 'vue-toast-notification/dist/theme-default.css';
import 'vue-toast-notification/dist/theme-sugar.css';

const app = createApp({});
app.use(ToastPlugin);
app.mount('#app');

let instance = app.$toast.open('You did it!');

// Force dismiss specific toast
instance.dismiss();

// Dismiss all opened toast immediately
app.$toast.clear();

app.$toast.open('Howdy!');

// Can accept an Object of options
app.$toast.open({
    message: 'Something went wrong!',
    type: 'error',
    // all of other options may go here
});

4. Формы

Адрес плагина: https://formkit.com/

Формы являются важной частью веб-приложений, фиксируя ввод данных пользователем и обеспечивая взаимодействие. Формы могут быть простыми или сложными и используются для таких задач, как регистрация, сбор данных и электронная коммерция. Формы улучшают взаимодействие с пользователем и функциональность системы и могут быть настроены для проверки, обработки ошибок и стиля. Но общеизвестно, что с формами трудно иметь дело, особенно когда они становятся более сложными. FormKit предоставляет набор утилит, которые позволяют нам легко создавать формы и управлять ими в приложениях Vue.js, начиная от простой проверки ввода и заканчивая расширенными функциями, такими как условная логика и динамические поля формы.

Установить

npm install @formkit/vue

Применение

Есть много вариантов использования formkit в приложении, давайте начнем с примера. Начните с настройки Formkit в вашем приложении Vue 3.

import { createApp } from 'vue'
import { plugin, defaultConfig } from '@formkit/vue'
import App from 'App.vue'

createApp(App).use(plugin, defaultConfig).mount('#app')

После импорта FormKit в глобальное приложение Vue.js мы можем использовать его в шаблоне. Например

<FormKit type="repeater" label="My Movies" add-label="Add Movie">
  <FormKit
    name="movie"
    type="autocomplete"
    label="Search for a movie"
    placeholder="Ex: Interstellar"
    :options="searchMovies"
  />
  <FormKit type="rating" label="My rating" />
</FormKit>

Это простой пример использования Formkit. Formkit — очень мощная платформа. Если вы заинтересованы в использовании FormKit для создания мощных форм, вы не будете разочарованы, попробовав Formkit.

5. Vue-перетаскивание

Адрес плагина: https://github.com/SortableJS/vue.draggable.next.

Добавление функции перетаскивания в приложение Vue.js может улучшить взаимодействие с пользователем. Поскольку возможности перетаскивания позволяют пользователям взаимодействовать с приложениями более интуитивным образом, пользователи могут легче упорядочивать данные и управлять ими. Vue-draggable — отличный инструмент для реализации функции перетаскивания, поскольку он упрощает процесс и может быть легко использован даже разработчиками, плохо знакомыми с Vue.js. Добавив этот плагин в свои приложения Vue.js, вы сможете создать более привлекательный и динамичный пользовательский интерфейс, который заставит пользователей вернуться.

Установить

#yarn
yarn add vuedraggable@next

#npm
npm i -S vuedraggable@next

Применение

Давайте создадим простой сортируемый список с помощью Vue-dragable.

<template>
  <div>
    <draggable
      v-model="cars"
      @start="drag = true"
      @end="drag = false"
      item-key="id"
    >
      <template #item="{ element }">
        <div>{
   
   { element }}</div>
      </template>
    </draggable>
  </div>
</template>

<script setup>
import { ref } from "vue";
import draggable from "vuedraggable";

const drag = ref(false);

const cars = ref(["Mercedes", "Toyota", "Honda", "Dodge"]);
</script>

6. Вьюфайр

Адрес плагина: https://vuefire.vuejs.org/

Firebase — это платформа Backend-as-a-Service (BaaS), которая предоставляет разработчикам инструменты и услуги для создания и развертывания полнофункциональных приложений. С помощью Firebase вы можете реализовать внутренние функции многих приложений Vue.js с минимальным кодом JavaScript. Однако добавление базы данных Firebase в ваше приложение может вызвать стресс. Vuefire — очень полезная и легкая оболочка, позволяющая легко синхронизировать данные с базой данных Firebase. Это избавляет от необходимости делать это вручную и имеет изящную встроенную логику, помогающую в тяжелой работе.

Установить

#yarn
yarn add vuefire firebase

#npm
npm install vuefire firebase

Применение

Перед использованием VueFire убедитесь, что у вас есть учетная запись Firebase и настройки проекта.

• Помните, что есть две разные базы данных: Database и Firestore.
• Предположим, мы хотим создать todo-приложение Vue.js через Firebase. Затем вам нужно настроить базу данных firestore.

Сначала мы создаем проект в Firebase, чтобы получить учетные данные приложения.

Когда проект запущен и работает, пришло время настроить базу данных firestore.

Создайте первую коллекцию под названием todos.

После того, как вы настроили Firebase Firestore Collection, вы готовы использовать Vuefire.

import { initializeApp } from 'firebase/app'
import { getFirestore, collection } from 'firebase/firestore'
// ... other firebase imports

export const firebaseApp = initializeApp({
  // your application settings from Firebase
})

// used for the firestore refs
const db = getFirestore(firebaseApp)

// here we can export reusable database references
export const todosRef = collection(db, 'todos')

<script setup>
import { useCollection } from 'vuefire'
import { collection } from 'firebase/firestore'

const todos = useCollection(collection(db, 'todos'))
const someTodo = useDocument(doc(collection(db, 'todos'), 'someId'))
</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
     <span>{
   
   { todo.text }}</span>
    </li>
  </ul>
</template>

7. vue3-google-вход

Адрес плагина: https://vue3-google-signin.syetalabs.io/

Аутентификация — важный аспект любого приложения, которое обрабатывает конфиденциальные данные. Будь то банковское приложение или платформа для социальных сетей, пользователи хотят быть уверены, что их информация в безопасности. За рубежом Google Sign-In — это распространенный механизм аутентификации, который позволяет пользователям входить в приложения, используя свои учетные данные Google, что не только экономит время, но и обеспечивает более удобный пользовательский интерфейс.

vue3-google-signin — это простой и настраиваемый способ реализации входа через Google в проекты Vue 3. vue3-google-signin обрабатывает весь процесс аутентификации, от отображения кнопки входа в Google до получения и управления токенами аутентификации пользователя, поэтому вам не нужно беспокоиться о деталях.

Установить

//npm
npm install -S vue3-google-signin

//yarn
yarn add vue3-google-signin

//pnpm
pnpm add vue3-google-signin

Отлично, тогда мы можем аутентифицировать пользователя в приложении, используя учетные данные пользователя учетной записи Google.

Применение

Настроить библиотеку несложно. Все, что вам нужно сделать, это добавить следующий код в точку входа вашего приложения (main.js или main.ts).

import GoogleSignInPlugin from "vue3-google-signin"

app.use(GoogleSignInPlugin, {
  clientId: 'CLIENT ID OBTAINED FROM GOOGLE API CONSOLE',
});

// other config

app.mount("#app");

Вот и все! Теперь давайте войдем в приложение через Google. Мы можем добавить кнопку входа в Google в компонент с помощью следующего кода:

<script setup lang="ts">
import {
  GoogleSignInButton,
  type CredentialResponse,
} from "vue3-google-signin";

// handle success event
const handleLoginSuccess = (response: CredentialResponse) => {
  const { credential } = response;
  console.log("Access Token", credential);
};

// handle an error event
const handleLoginError = () => {
  console.error("Login failed");
};
</script>

<template>
  <GoogleSignInButton
    @success="handleLoginSuccess"
    @error="handleLoginError"
  ></GoogleSignInButton>
</template>

Также попробуйте новую аутентификацию One Tap от Google, которая отображает небольшое диалоговое окно или всплывающее окно сбоку, если видимость диалогового окна ограничена пользователем, вошедшим в приложение.

import { useOneTap, type CredentialResponse } from "vue3-google-signin";

useOneTap({
  onSuccess: (response: CredentialResponse) => {
    console.log("Success:", response);
  },
  onError: () => console.error("Error with One Tap Login"),
  // options
});

Подведем итог

В целом, Vue 3 — это мощная среда JavaScript, которая позволяет нам создавать невероятные пользовательские интерфейсы и приложения. С плагинами и библиотеками, упомянутыми в этой статье, мы можем упростить рабочий процесс и добиться лучших результатов за меньшее время.