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

P.S. Вот сыллка на GitHub с кодом приложения.

Введение/Установка

Окей, представим что вы решили все таки начать пользоваться Vuetify и написать какое-то своё первое приложение используя его. И начинается все конечно же с установки, для начала давайте создадим новое Vue CLI приложение с помощью npm:

vue create vuetify-app

Важно, надо чтобы приложение имело версию Vue 2.0, поскольку на время написания этой статьи в Vuetify поддержка идёт только для Vue 2.0 приложений. После того как нового приложение было создано  —  следующим шагом будет установить UI фреймворк как плагин:

vue add vuetify

Нас попросит в дальнейшем выбрать какой-то пресет, и поскольку мы не собираемся пробовать версию V3 (которая нестабильна), то мы выбираем пресет “Default”:

Когда процесс установки Vuetify завершиться, то можно будет запустить локальный сервер приложения:

npm run serve

И открыв https://localhost:8080 мы увидим по-умолчанию созданную страницу от Vuetify с полезными сыллками:

Как мы видим то все работает и самое время начать уже писать наше приложение.

Так о чем же будет наше приложение?

Хороший вопрос, ведь мы создали уже Vue CLI приложение и установили Vuetify, но я так и не сказал что же будет делать именно наше приложение. Мой любимый пример, это мобильное приложение по доставке еды  —  поэтому давайте это будет тема нашего приложения.

Но перед этим давайте также установим Vue Router:

vue add router

Как обычно при добавлении нового плагина к приложению, терминал может сказать что есть изменения которые не были добавлены в commit, мы здесь пишем “y” (т.е. yes) и двигаемся дальше:

Дальше при установке нас спросит хотим ли использовать режим истории в маршутизации, и здесь мы также тыкаем “y”:

Вот теперь Vue Router установлен, и самое время убрать код примеров в src/router/index.js чтобы когда мы сейчас запустили снова локальный сервер  —  не было ошибок:

// Файл src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

Файл маршутизации теперь настроен и не содержит в себе каких-то несуществующих маршрутов, ну а теперь нужно также почистить файл App.vue:

<!-- App.vue -->
<template>
  <div id="app">
    <!-- Сейчас мы будем здесь писать свой код-->
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

Хорошо, теперь мы настроили наши два файла и при запуске не будет никаких ошибок  —  а самое лучшее это то  —  что мы можем начинать разрабатывать наше приложение.

Layout

В Vuetify уже есть своя придуманная гибкая система построения сетки в приложении. И давайте сейчас с ней ознакомимся. Для начала нам нужно будет воспользоваться двумя компонентами, это v-app и v-main. Открываем App.vue и добавляем их:

<template>
  <v-app>
    
   <v-main>
   </v-main>
    
  </v-app>
</template>
<script>
export default {
  name: 'App'
}
</script>

С компонента v-app и начинается наше приложение, этот компонент является псевдонимом тега <div> с id=”app”, а в компоненте v-main мы уже начинаем размещать контент самого приложения. Следующим шагом будет добавить хедер с помощью компонента v-app-bar:

<template>
  <v-app>
    
    <v-app-bar
      app
    >
    
    </v-app-bar>
    
    <v-main>
    </v-main>
    
  </v-app>
</template>
<!-- <script> -->

Если мы перейдем на локальный сервер  —  то увидим следующее:

На странице нету ничего кроме нашего хедера. Объясню также для чего я добавил атрибут app в v-app-bar. Когда Vuetify видит что в компоненте v-app-bar есть атрибут app, то он понимает что это часть layout’a приложения. Многие также могут спросить почему я добавил хедер перед v-main, ответ простой: в v-main будет уже располагаться компонент router-view который будет показывать содержимое маршрутов, а поскольку наш хедер это не сам контент приложения  —  то я и вынес его перед компонентом v-main.

Мне не очень нравится цвет хедера, поэтому давайте его поменяем добавив атрибут color:

<template>
  <v-app>
    
    <v-app-bar
      app
      color="red"
    >
      <!-- Сейчас добавим сюда title -->
    </v-app-bar>
    
    <v-main>
      <!-- Контент -->
    </v-main>
    
  </v-app>
</template>

Окей, и что если мы перейдем на локальный сервер? То вот что мы с вами увидим:

Круто, а теперь мы можем начинать добавлять уже какой-то контент? Да, но перед этим добавим также заголовок в хедер и компонент просмотра маршутов внутри v-main:

<template>
  <v-app>
    
    <v-app-bar
      app
      color="red"
    >
      <v-app-bar-title>
        <h3 class="text-h4 white--text">iFood</h3>
      </v-app-bar-title>
    </v-app-bar>
    
    <v-main>
      <router-view></router-view>
    </v-main>
    
  </v-app>
</template>

Заголовок мы добавили с помощью компонента v-app-bar-title, и уже внутри прописали тег h4 с классом от Vuetify которые помогают стилизировать текст. Давайте посмотрим как выглядит страница на локальном сервере:

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

Главная страница

Давайте создадим компонент src/components/List.vue в которым и будет выводиться весь список заведений с помощью JSON массива. Для начала внутри этого компонента создадим переменную items_list, которая и будет хранить в себе список всех заведений:

<!-- src/components/List.vue -->
<template>
  <div>
    <!-- Пока здесь будет пустой div -->
  </div>
</template>
<script>
export default {
  name: 'List',
  data: () => ({
    items_list: [
      {
        id: 0,
        title: 'Заведение 1',
        description: 'Это наверное самое крутое заведение которое вы можете знать',
        img: '' // Здесь добавляем любое изображение
      },
      {
        id: 1,
        title: 'Заведение 2',
        description: 'Lorem ipsum',
        img: '' // Здесь добавляем любое изображение
      }
      // Дальше можете добавить другие заведения в список
    ]
  })
}
</script>

Окей, список у нас есть, а с помощью каких компонентов от Vuetify будем его выводить? Сейчас воспользуемся компонентом v-card, который позволяет удобно в карточках выводить подобную информацию. Но при этом мы также воспользуемся Bootstrap Vue чтобы элементы красиво располагались на странице.

<!-- src/components/List.vue -->
<template>
  <v-container> <!-- Создаем контейнер внутри которого и будут элементы компонента -->
    
    <v-row class="list__cafes-title"> <!-- В это row выводим заголовок компонента -->
      <v-col>
        <h2 class="text-center text-h3 py-3">List of cafes</h2>
      </v-col>
    </v-row>
    
    <v-row class="list__cafes-content">
      <v-col md="4" v-for="item in items_list" :key="item.id">
        <v-card>
          
          <v-img
            height="250"
            :src="item.img"
          ></v-img> <!-- С помощью v-img добавляем изображение карточки -->
          
          <v-card-title> <!-- Заголовок заведения -->
            <h3 class="text-h4">{{ item.title }}</h3>
          </v-card-title>
          
          <v-card-text> <!-- Описание заведения -->
            <p class="text-body-1">{{ item.description }}</p>
          </v-card-text>
        
        </v-card>
      </v-col>
    </v-row>
  
  </v-container>
</template>

Многие могут заметить что в row’e где мы уже выводим сами карточки заведения с помощью v-for в компоненте v-col я добавляю атрибут md=”4". Те кто учили Bootstrap уже должны догадаться для чего нужен этот атрибут и как именно он задает размеры колонок. С помощью этого атрибута я указал чтобы каждая колонка имела размеры 4/12 и благодаря этому на странице карточки будут выводиться по 3 штуки в один ряд. Окей, компонент вывода заведений готов, надо теперь добавить его маршрут в файл src/router/index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../components/List.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'List',
    component: List
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

А теперь давайте перейдем на локальный сервер и посмотрим на результат вывода:

Супер​ У нас есть вывод заведений на главной странице. А теперь я думаю самое время добавить отдельную страницу заведения, которая будет открываться при клике на заголовок карточки. Поскольку у нас нету базы данных с которой мы могли бы брать определенное заведение через API  —  то сама страница будет статичной.

Страница просмотра заведения

Для начала создаём компонент src/components/CafeView.vue и первое что в нем будет выводиться это изображение с заведением, его заголовок и описание. Для этой базовой информации мы создадим отдельный компонент с названием CafeInfo.vue, но перед этим заполним уже чем-то компонент CafeView.vue:

<!-- src/components/CafeView.vue -->
<template>
  <v-container>
    
    <CafeInfo></CafeInfo> <!-- Этот компонент мы сейчас создадим -->
    
  </v-container>
</template>

<script>
import CafeInfo from './Cafe/CafeInfo.vue'
export default {
  name: 'CafeView',
  components: {
    CafeInfo
  }
}
</script>

Хорошо, а теперь создаём компонент CafeInfo.vue:

<!-- src/components/Cafe/CafeInfo.vue -->
<template>
  <v-row>
    
    <v-col md="6">
      
      <v-card class="h-100">
        <v-img
          height="350"
          :src="main_info.img"
          class="d-flex align-end"
        >
          <!--
            Выше можете заметить что с помощью классов d-flex и align-end, мы прописали CSS свойства display: flex; и align-items: flex-end. Это сделает так что название заведения будет выводиться внизу внутри изображения
          -->
          <h2 class="text-h4 ml-4 mb-4 white--text">{{ main_info.title }}</h2>
        </v-img>
      </v-card>
      
    </v-col>
    <v-col md="6">
      
       <v-card class="h-100">
         
         <v-card-text>
          <p class="font-weight-light">{{ main_info.description }}</p>
         </v-card-text>
         
       </v-card>
      
    </v-col>
    
  </v-row>
  
</template>
<script>
export default {
  name: 'CafeInfo',
  data: () => ({
    main_info: {
      img: 'https://example.com/image_1.jpg',
      title: 'Заголовок заведения',
      description: 'А здесь уже описание заведения'
    }
  })
}
</script>

<style>
.h-100 {
  height: 100%;
}
</style>

Для удобства я специально поместил данные в data функцию. Теперь когда наш компонент готов  —  самое время сделать маршрут для компонента CafeView.vue в src/routes/index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../components/List.vue'
import CafeView from '../components/CafeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'List',
    component: List
  },
  {
    path: '/cafe/view',
    name: 'CafeView',
    component: CafeView
  }
]
// ...

Окей, а теперь давайте посмотрим как это выглядит вместе на локальном сервере на url http://localhost:8080/cafe/view:

Вид можно было б ещё больше кастомизировать чтобы выглядело намного красивее. Но пусть будет так с стилями Vuetify по-умолчанию. Теперь давайте также пропишем сыллку на переход на эту страницу в List.vue:

<!-- src/components/List.vue -->
<template>
  <v-container>
    
    <v-row class="list__cafes-title">
      <v-col>
        <h2 class="text-center text-h3 py-3">List of cafes</h2>
      </v-col>
    </v-row>
    
    <v-row class="list__cafes-content">
      <v-col md="4" v-for="item in items_list" :key="item.id">
        
        <v-card>
          
          <v-img
            height="250"
            :src="item.img"
          ></v-img>
          
          <v-card-title>
            <router-link to="/cafe/view">
              <h3 class="text-h4">{{ item.title }}</h3>
            </router-link>
          </v-card-title>
          
          <v-card-text>
            <p class="text-body-1">{{ item.description }}</p>
          </v-card-text>
          
        </v-card>
        
      </v-col>
    </v-row>
  </v-container>
</template>

В массив объектов заведений можно было бы ещё добавить отдельное поле url, которое хранило в себе линки на страницу заведения  —  но поскольку само приложение у нас статичное, то мы сделали именно так. Вывода такой информации на странице заведения — недостаточно. Нужно ещё реализовать компонент вывода меню товаров (еды) заведения. Поэтому для этого мы сейчас создадим отдельный компонент CafeMenu.vue.

Компонент меню заведения

Сначала создайте компонент src/components/Cafe/CafeMenu.vue, и внутри него сначала создаем переменную с массивом внутри которого будут объекты с информацией об товарах:

<!-- src/components/Cafe/CafeMenu.vue -->
<template>
  <v-row>
    <!-- Пока здесь будет пустой row -->
  </v-row>
</template>

<script>
export default {
  name: 'CafeMenu',
  data: () => ({
    menu_items: [
      {
        id: 0,
        name: 'King Burger',
        img: 'https://example.com/burger_1.png',
        price: 34.99
      },
      {
        id: 1,
        name: 'Dark Burger',
        img: 'https://example.com/burger_2.png',
        price: 39.99
      },
      // Можете также дальше добавить другие товары 
    ]
  })
}
</script>

Рекомендую также добавить другие товары в список. А теперь самое время вывести их в отдельной колонке:

<!-- src/components/Cafe/CafeMenu.vue -->
<template>
  <v-row>
    
    <v-col md="6">
      <v-card>
        
        <v-img
          height="250"
          src="https://example.com/menu_img.png"
          class="d-flex align-end"
        >
          <h2 class="ml-4 mb-4 text-h3 white--text">MENU</h2>
        </v-img>
        
      </v-card>
    </v-col>
    
    <v-col md="6">
      <v-card>
        
        <v-card-text>
          <!--
            Здесь внутри начинаем выводить товары,
            для этого создаем список
          -->
          <v-list-item-group>
            
            <v-list-item v-for="item in menu_items" :key="item.id">
              
              <v-list-item-avatar>
                <!-- Выводим изображение товара -->
                <img :src="item.img" fluid />
              </v-list-item-avatar>
              
              <v-list-item-content>
                
                <v-list-item-title>
                  <!-- Выводим название товара -->
                  <h5 class="text-h5">{{ item.name }}</h5>
                </v-list-item-title>
                
                <v-list-item-subtitle>
                  <!-- Выводим цену товару -->
                  <b>{{ item.price }}</b>
                </v-list-item-subtitle>
                
              </v-list-item-content>
              
              <v-list-item-action>
                <!-- Добавляем кнопку для покупки товара -->
                <v-btn icon>
                  <v-icon>mdi-plus</v-icon>
                </v-btn>
              </v-list-item-action>
              
            </v-list-item>
            
          </v-list-item-group>
        </v-card-text>
        
      </v-card>
    
    </v-col>
    
  </v-row>
</template>

С помощью компонента v-list-item-group мы создали список, внутри которого с помощью v-for в v-list-item вывели список всех товаров. Компонент v-list-item-content используется для того чтобы выводить контент самого элемента списка, в нашем случае мы выводим заголовок (v-list-item-title) и цену (с помощью v-list-item-subtitle). А с помощью v-list-item-action, внутри мы добавили кнопку покупки товара (v-btn), атрибут icon мы добавили чтобы указать что внутри кнопки выводиться только иконка. 

Внутри v-icon мы указали иконку от Material Design. Окей, теперь когда я объяснил что к чему — можем подключить данный компонент:

<!-- src/components/CafeView.vue -->
<template>
  <v-container>
    
    <CafeInfo></CafeInfo>
    <CafeMenu></CafeMenu>
    
  </v-container>
</template>

<script>
import CafeInfo from './Cafe/CafeInfo.vue'
import CafeMenu from './Cafe/CafeMenu.vue'
export default {
  name: 'CafeView',
  components: {
    CafeInfo,
    CafeMenu
  }
}
</script>

Открываем локальный сервер и смотрим на результат:

Круто, но нашему приложению не хватает менюшки в хедере очень сильно. Поэтому давайте её сейчас добавим.

Создание навигации

Сейчас нам нужно перейти в компонент App.vue и добавить новый компонент v-navigation-drawer:

<template>
  <v-app>
    
    <v-navigation-drawer
      app
      left
    ></v-navigation-drawer>
    
    <v-app-bar
      app
      color="red"
    >
      <v-app-bar-title>
        <h3 class="text-h4 white--text">iFood</h3>
      </v-app-bar-title>
    </v-app-bar>
    
    <v-main>
      <router-view></router-view>
    </v-main>
    
  </v-app>
</template>

<script>
export default {
  name: 'App'
}
</script>

Этот компонент позволяет создавать меню навигации, я специально прописал атрибут left чтобы пустое меню навигации появилось с левой стороны:

Выглядит немного страшновато, но сейчас мы это пофиксим. Добавлю также что v-navigation-drawer является одним из компонентов layout системы Vuetify, и именно он отвечает за меню навигации. Давайте добавим следующий код чтобы это меню срабатывало при клике на иконку в хедере:

<template>
  <v-app>
    
    <v-navigation-drawer
      app
      left
      absolute
      temporary
      v-model="drawer"
    ></v-navigation-drawer>
    
    <v-app-bar
      app
      color="red"
    >
      <v-app-bar-nav-icon @click="drawer = !drawer">
      </v-app-bar-nav-icon>
      <v-app-bar-title>
        <h3 class="text-h4 white--text">iFood</h3>
      </v-app-bar-title>
    </v-app-bar>
    
    <v-main>
      <router-view></router-view>
    </v-main>
    
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    drawer: false
  })
}
</script>

Зачем я добавил атрибуты absolute, temporary и v-model в v-navigation-drawer? Во-первых, absolute задает CSS свойство position: absolute; а это позволит сделать так чтобы эта менюшка и на мобайл хорошо отображалась. Во-вторых, temporary задает z-index для навигации — чтобы другие элементы не залазили на неё. 

И во-третьих, v-model имеет в себе переменную drawer, которая в зависимости от значения true или false будет показывать меню. К примеру, если переменная drawer равняется в текущую момент значению true — то менюшка будет показываться. Если false, то менюшка будет спрятана. Если вы сейчас перейдете на локальный сервер — то увидите в хедере иконку и при клике на неё будет вылазить наше меню:

Теперь нужно чем-то заполнить меню, для этого создадим сейчас отдельную переменную с пунктами для меню:

<!-- ./ template -->
<script>
export default {
  name: 'App',
  data: () => ({
    drawer: false,
    menu_items: [
      {
        id: 0,
        name: 'Список заведения',
        url: '/'
      },
      {
        id: 1,
        name: 'О нас',
        url: '#'
      },
      {
        id: 2,
        name: 'Контакты',
        url: '#'
      },
      {
        id: 3,
        name: 'Помощь',
        url: '#'
      }
    ]
  })
}
</script>

А теперь выведем все это внутри v-navigation-drawer:

<template>
  <v-app>
    
    <v-navigation-drawer
      app
      left
      absolute
      temporary
      v-model="drawer"
    >
      
      <v-list-item-group>
        
        <v-list-item v-for="item in menu_items" :key="item.id">
          <v-list-item-title>
            <router-link :to="item.url">{{ item.name }}</router-link>
          </v-list-item-title>
        </v-list-item>
        
      </v-list-item-group>
      
    </v-navigation-drawer>
    
    <v-app-bar
      app
      color="red"
    >
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-app-bar-title>
        <h3 class="text-h4 white--text">iFood</h3>
      </v-app-bar-title>
    </v-app-bar>
    
    <v-main>
      <router-view></router-view>
    </v-main>
    
  </v-app>
</template>

Готово, теперь если мы откроем меню то увидим следующее:

И вот у нас есть менюшка которая выглядет не прям красиво, но она работает и позволяет уже переходить на страницы. Окей, и что у нас получается? У нас есть простое приложение с выводом заведений, и просмотром этих заведений. Все это довольно таки примитивно — то мы смогли уже сделать что-то с Vuetify.

Итог

Окей, нам получилось сделать просто приложение с неким дизайном с помощью UI фреймворка для Vue.js — Vuetify. Можно было б и больше рассказать — но это сделало статью ещё более длинной, поэтому если кто-то хочет узнать более подробно по данной теме, то может посмотреть моё видео где мы создаём аналогичное приложение — только здесь уже идёт больше объяснений что и как и куда. Кому интересно может заглянуть.

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