Завершение курса + всякие полезности

Ну вот наш курс и подошёл к завершению.

Надеюсь, вам было интересно поработать с Vesp и вы узнали для себя что-то новое и даже интересное.

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

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

PHP

Начнём с box/spout - это очень шустрая библиотека для работы с XLSX, ODS и CSV. Я наткнулся на неё, когда искал экономичное решение для экспорта больших объёмов информации, и она с ними отлично справилась.

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

ramsey/uuid я использую для удобной генерации uuid моделей, когда мне не нужно, чтобы пользователи могли перебирать данные из контроллеров по id. например, на bezumkin.ru все картинки выводятся именно по uuid, подбором ничего не открыть.

Обратите внимание, что uuid бывает нескольких видов, если вам нужен именно случайный uuid - то это 4я версия.

peppeocchi/php-cron-scheduler уже используется в Vesp по умолчанию, но я про него ничего не рассказывал. Там всё просто - прописываете в crontab сервера файл core/cli/cron.php и добавляете скрипты для выполнения, рядом лежит пример для удаления старых сессий.

phpmailer/phpmailer для отправки почты, вместе с pelago/emogrifier, который разбирает стили письма из шапки и вставляет в теги, чтобы все почтовые клиенты их нормально понимали.

А для шаблонов писем я использую, понятное дело fenom/fenom.

Если будет интерес, могу написать подробнее про подключение подобных библиотек к проекту.

Еще вам может понадобиться установить doctrine/dbal, если вы будете писать миграции, которые меняют тип колонок в таблицах методом ->change(), например со string на text. У меня такое иногда случается.

Этого набора библиотек мне хватает для реализации 90% проектов. В остальных случаях нужно подключить какой-нибудь сервис для оплаты или что-то подобное. Но всё это делается по одной схеме - ищем подходящую библиотеку, читаем документацию, подключаем.

Javascript

При выборе JS решения для Vesp я советую руководствоваться следующими правилами:

  • в первую очередь проверяем официальные модули для Nuxt
  • если ничего нет, ищем нужное на npmjs
  • предпочтение отдаём модулям Nuxt, а затем интеграциям с Vue
  • если совсем ничего нет - берём решения написанные на чистом JS, по возможности без зависимостей
  • И никакого jQuery!

vue-meta уже интегрирован в Nuxt и доступен на всех страницах для выставления title и прочей работы с мета-тегами. Именно этот модуль мы используем в админке для указания названий страниц.

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

@nuxtjs/sitemap - генерация карты сайта. Отлично работает как со статическими сайтами, так и с динамическими маршрутами на тысячи страниц. Просто пишете функцию с запросом в API для получения этих страниц, и модуль генерирует по ним карту.

Пример с bezumkin.ru:

Config.sitemap = {
  hostname: env.SITE_URL,
  gzip: true,
  exclude: ['/admin/**', '/user/**', '/service/**'],
  routes: async () => {
    const routes = []
    const [{data: sections}, {data: topics}] = await Promise.all([
      axios.get(env.API_URL + 'web/sections', {params: {sort: 'views_count', dir: 'desc'}}),
      axios.get(env.API_URL + 'web/topics', {params: {sort: 'id', dir: 'desc'}}),
    ])

    sections.rows.forEach((section) => {
      routes.push({
        url: '/sections/' + section.alias,
        lastmod: section.updated_at || section.created_at,
      })
    })
    topics.rows.forEach((topic) => {
      routes.push({
        url: (topic.section.lessons ? '/lessons/' : '/sections/') + topic.section.alias + '/' + topic.id,
        lastmod: topic.updated_at || topic.created_at,
      })
    })

    return routes
  },
}

@nuxtjs/pwa поможет вам превратить ваш сайт в PWA, который можно устанавливать на телефон. Всё работает хорошо по умолчанию, нужно только указать свою иконку. Этот модуль уже подключен по умолчанию в Vesp.

@nuxtjs/svg позволяет легко импортировать SVG файлы в любом виде, хоть голым текстом, хоть компонентом для вставки в шаблон. Просто посмотрите примеры в документации, это крайне полезный модуль для вёрстки.

@nuxtjs/markdownit позволит вам удобно загружать на страницы какие-то статичные документы, вроде пользовательского соглашения в формате Markdown. Понятное дело, работать можно не только с файлами, а рендерить вообще любой markdown в html через функцию $md.render().

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

glightbox я использую для вывода увеличенных картинок при клике, например прямо здесь - на bezumkin.ru.

Напоследок упомяну еще 2 библиотеки, которые уже подключены в Vesp, но со ссылками на их интеграцию в проект, возможно будет интересно почитать.

bootstrap-vue/nuxt - лучшая интеграция Bootstrap 4 с 85+ компонентами на все случаи жизни. Лично я очень ценю возможность самостоятельного подключения и модификации Bootstrap в стили проекта, с импортом только нужного, что облегчает размер собранного проекта.

Там есть и ленивая загрузка картинок, и прогресс-бары и еще много чего еще - просто внимательно посмотрите документацию, она очень подробная.

К сожалению, на Vue 3 и Bootstrap 5 они переходить не торопятся, поэтому я уже присматриваю другие решения на будущее.

@fortawesome/vue-fontawesome - мои любимые иконки, которые постоянно развиваются и обновляются. В последнее время, наверное, даже слишком бурно, что иногда приводит к небольшим проблемам. В любом случае, богаче набора иконок так удобно интегрированных в Nuxt найти не получится.

Заключение

На этом у меня пока всё, надеюсь информации этого курса вам будет достаточно, чтобы погрузиться в Vesp и понять для себя, нравится ли вам логика его работы и стоит ли уделять время изучению используемых технологий.

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

Благодаря отделению бэкенда от фронтенда мои руки стали полностью развязаны. Не нужно думать о том, какие данные пришли от юзера, где может быть попытка взлома, какие переменные доступны в шаблоне, а какие нет. Просто считаем все запросы и ответы в API публичными - то есть, от хакера, и обрабатываем соответственно.

Завершение курса означает только окончание написания новых заметок, но я продолжаю отвечать на ваши вопросы в комментариях!

Проект VespShop скорее всего будет понемногу развиваться и после курса, если мне будут заказывать создание интернет-магазинов и при этом процессе получится разрабатывать какие-то универсальные штуки для общего пользования.

Буду очень рад вашим отзывам о курсе в комментариях. Что понравилось, что не очень, о чём еще нужно написать в будущем за рамками курса.

← Предыдущая заметка
Запуск в продакшн
Комментарии (41)
NightRider
11.07.2022 21:47

В курсе все достаточно разложено по полочкам и доходчиво объяснено, в этом смысле все хорошо. Спасибо!

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

Ну а так, я думаю все что касается обычной разработки сайтов и что не было рассмотрено тут, так или иначе будет интересно.

bezumkinВасилий Наумкин
12.07.2022 09:28

Насчёт древовидного - это всё делается через рекурсивный вызов одного компонента, никакой уникальности именно для Vesp нет. Принцип ровно тот же, что и в MODX, да и вообще в любой системе.

Например, комментарии на bezumkin.ru:

  • базовый компонент CommentsTree получает комменты в "плоском" виде, где есть id и parent_id
  • строит по этому parent_id дерево комментариев
  • вызывает в своём шаблоне форму редактирования и компонент оформления ветки CommentsThread с передачей ему комментариев
  • тот оформляет первый уровень комментариев, и смотрит, есть ли у них потомки.
  • если есть, перебирает их и внутри вызывает сам себя, то есть, делает рекурсию

CommentsTree:

<template>
  <div id="topic-comments" ...>
    <comments-thread
      :comments="commentsTree"
      :topic="topic"
      ...
    />

    <comments-form v-if="..." />
  </div>
</template>

CommentsThread:

<template>
  <div class="comments-thread">
    <div v-for="comment in comments" ...>
      ...

      <comments-form v-if="showForm(comment)" ... />
      <comments-thread
        v-if="comment.children.length"
        :comments="comment.children"
        :topic="topic"
        ...
      />
    </div>
  </div>
</template>

Нужно будет прописать логику вывода формы комментирования в нужном месте, и методы сохранения, редактирования и удаления комментриев. Лично я всё это держу в родительском компоненте CommentsTree, а действия из вложенных CommentsThread передаю событиями this.$emit('action', data)

Примерно такая же логка будет и с любыми другими рекурсивными данными, вроде вложенного меню.

И возможно я прошу многого, но хотелось бы понимать как пишутся умные фильтры, по типу mSearch2

Постараюсь написать про это заметку, как будет время.

NightRider
12.07.2022 13:21

Ну да, вроде как понятнее. В остальных системах принцип понятен, тут больше возникал вопрос реализации этого на vue, так как с ним редко доводилось работать. Надо пробовать. Спасибо!

Дмитрий П.
12.07.2022 19:20

А подскажите пожалуйста, как для @nuxtjs/sitemap в конфиге правильно импортировать axios?

bezumkinВасилий Наумкин
12.07.2022 23:40

Всё как обычно, в самом начале файла конфига

import axios from 'axios'
inetloverАлександр Наумов
16.08.2022 11:30

Буду очень рад вашим отзывам о курсе в комментариях.

Курс замечательный, проделана колоссальная работа, узнал много новых технологий, спасибо Василию за труды и то, что он делится ценным опытом, всем рекомендую!!!

о чём еще нужно написать в будущем за рамками курса.

Хотелось бы статейку про правильную интеграцию JS в VESP.

  1. Интеграция модулей Nuxt.
  2. Интеграция модуля Vue.
  3. Интеграция ванильного JS.

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

Занимаясь этим вопросом наткнулся на статью: Как правильно зарегистрировать плагин в nuxt.js . То есть может быть проблемой правильного добавление плагина Vue в Nuxt.

Да и по ванильному JS, хочется каких-то рекомендаций, например в каком случае js код нужно переделывать в Vue плагин.

bezumkinВасилий Наумкин
16.08.2022 17:50

Курс замечательный

Ура!

Хотелось бы статейку про правильную интеграцию JS в VESP.

Модули Nuxt ставятся парой строк, там вообще никаких вопросов нет. Большинство популярных компонентов Vue про Nuxt или в курсе, или имеют issues про это на Github.

А вот модули JS надо смотреть в каждом конкретном случае. Проблемы обычно бывают если JS рассчитывает на работу в браузере, а ты его используешь при серверном рендере, но это довольно легко решается.

В общем, давай так - как будет конкретный вопрос по подключению чего-либо, просто спроси тут, я отвечу.

inetloverАлександр Наумов
16.08.2022 19:19

Ок, спасибо!

inetloverАлександр Наумов
17.09.2022 23:56

Василий добрый день!

Не подскажешь в чем может быть проблема с установкой Nuxt плагина в Vesp?

Устанавливаю плагин на голую сборку Nuxt - все работает, делаю все тоже самое на Vesp вижу такую заглушку.

В консоли ошибок нет.

Вот сам плагин https://github.com/oleksiikhr/vue-stripe-menu/tree/vue2

Думаю, может в nuxt.config.js плагин как-то не так подключаю. Подключил так:

// export default Config
export default {
 plugins: [
   {
     src: '@/src/site/plugins/menu',
   },
 ],
}
bezumkinВасилий Наумкин
18.09.2022 09:26

Vesp расширяет и возвращает конфиг из @vesp/frontend. То есть, должно быть так:

import {Config, findEnv, loadEnv} from '@vesp/frontend'

// ... всякие другие настройки

Config.plugins = ['@/src/site/plugins/menu']

// ...

return Config

А если ты делаешь export default {...}, то просто игнорируешь все настройки по умолчанию и возвращаешь только 1 плагин, без остальных настроек - и тогда система не может даже найти директорию с исходниками, потому и просить её создать.

inetloverАлександр Наумов
18.09.2022 11:31

Супер! Спасибо, заработало!!

inetloverАлександр Наумов
20.08.2022 14:46

Василий, добрый день!

У нас есть файлы scss, только не пойму, как они обрабатываются, ведь node-sass, sass-loader не установлены?

bezumkinВасилий Наумкин
20.08.2022 15:00

Очень даже установлены - просто их тянет зависимостями сам Vesp.

inetloverАлександр Наумов
20.08.2022 15:31

Очень даже установлены - просто их тянет зависимостями сам Vesp.

Круто! Спасибо.

А для чего нужна папка vendor?

vesp-shop.test/core/vendor

bezumkinВасилий Наумкин
20.08.2022 15:49

А там PHP зависимости от Composer!

inetloverАлександр Наумов
20.08.2022 22:32

Спасибо, понял!!

bezumkinВасилий Наумкин
21.08.2022 06:27

Только сейчас заметил, что у тебя путь от корня сайта.

Такого быть не должно, директория core находится на одном уровне с www - корнем сайта. Ты видимо случайно в ней composer как-то запустил или что-то такое.

Вот правильная www - там только api.php и никаких директорий.

inetloverАлександр Наумов
21.08.2022 22:11

Василий, спасибо! Это у меня так папка называется vesp-shop.test в которой на одном уровне папки www и core, а в core находится папка vendor.

bezumkinВасилий Наумкин
22.08.2022 03:13

А, тогда все верно!

inetloverАлександр Наумов
30.08.2022 21:45

Василий, добрый день!

Обратил внимание, что на странице http://s30069.h10.modhost.pro/category-81/product-1 дважды идёт ссылка на один и тот же скрипт.

В начале: <link rel="preload" href="/_nuxt/62f66e0.js" as="script">

В конце: <script src="/_nuxt/62f66e0.js" defer></script>

Можешь объяснить в чем фишка?

bezumkinВасилий Наумкин
31.08.2022 13:51

Это 2 разных тега:

Несмотря на 2 тега, физически файл грузится только 1 раз.

Стоит отметить, что мы этими вопросами вообще не заведуем и не управляем - Nuxt сам собирает файлы, минимизирует и подключает оптимальным способом.

inetloverАлександр Наумов
31.08.2022 21:29

Василий, спасибо большое, за разъяснение!

Скажи пожалуйста, на сколько сложно и с какими трудностями можно столкнуться, если на Vesp натянуть вот такой шаблон https://pixinvent.com/demo/vuexy-vuejs-admin-dashboard-template/landing/ ?

bezumkinВасилий Наумкин
01.09.2022 11:31

Не знаю, судя по Composition API оно вообще для Vue 3. Да и Laravel там, наверное, не просто так.

Ты лучше скажи, зачем оно вообще тебе нужно?

Это же админка, чтобы что-то админить - а Vesp по умолчанию админить нечего, кроме юзеров. Всё нужно писать, а в процессе написания заодно и админку сделаешь на Bootstrap.

В общем, я ни разу ничего подобного не использовал и зачем оно нужно не в курсе.

inetloverАлександр Наумов
03.09.2022 20:41

Василий, спасибо!

1. Я изучал Bootstrap, когда он только появился, но использовать его не стал, так как тогда он тянул все стили своей библиотеки даже те которые я не использовал на сайте. Сейчас я вижу, что в VESP можно конфигурировать в файле nuxt.config.js, подключать только те модули из Bootstrap которые будут использоваться, а вся библиотека Bootstrap не тянется?

Я делаю малостраничные сайты на JS и Webpack, а в верстке использую методологию БЭМ. Vue и Nuxt стал изучать с появлением твоего курса по Vesp.

2. Вопрос: Как я понял главная проблема установки плагинов Vue под Nuxt это SSR, а если Nuxt будет работать в SPA режиме, то такой проблемы не будет и можно с минимальными изменениями использовать плагины Vue в Nuxt?

Шаблон, ссылку на который я дал выше можно скачать в ознакомительных целях, набрав в поиске vuexy download. Хочу подсмотреть там идеи в плане UI/UX дизайна, ведь они тоже используют bootstrap-vue, только там Vue без Nuxt. Там есть версия под Vue 3, но так же есть и под Vue 2.

Вот список плагинов которые они используют:

  "dependencies": {
    "@casl/ability": "4.1.6",
    "@casl/vue": "1.1.1",
    "@fullcalendar/common": "5.x",
    "@fullcalendar/core": "5.x",
    "@fullcalendar/daygrid": "5.x",
    "@fullcalendar/interaction": "5.x",
    "@fullcalendar/list": "5.x",
    "@fullcalendar/timegrid": "5.x",
    "@fullcalendar/vue": "5.x",
    "@vue/composition-api": "1.3.0",
    "@vueuse/core": "4.0.0",
    "animate.css": "4.1.1",
    "apexcharts": "3.23.0",
    "axios": "0.21.1",
    "axios-mock-adapter": "1.19.0",
    "bootstrap": "4.6.0",
    "bootstrap-vue": "2.21.1",
    "chart.js": "2.9.4",
    "core-js": "3.8.1",
    "echarts": "4.8.0",
    "jsonwebtoken": "8.5.1",
    "leaflet": "1.6.0",
    "portal-vue": "2.1.7",
    "postcss-rtl": "1.7.3",
    "prismjs": "1.19.0",
    "swiper": "5.4.5",
    "uuid": "8.3.2",
    "vee-validate": "3.4.5",
    "vue": "2.x",
    "vue-apexcharts": "1.6.0",
    "vue-autosuggest": "2.2.0",
    "vue-awesome-swiper": "4.1.1",
    "vue-chartjs": "3.5.0",
    "vue-cleave-component": "2.1.3",
    "vue-clipboard2": "0.3.1",
    "vue-context": "6.0.0",
    "vue-echarts": "5.0.0-beta.0",
    "vue-feather-icons": "5.1.0",
    "vue-flatpickr-component": "8.1.6",
    "vue-form-wizard": "0.8.4",
    "vue-good-table": "2.21.0",
    "vue-i18n": "8.22.2",
    "vue-perfect-scrollbar": "0.2.1",
    "vue-prism-component": "1.1.1",
    "vue-quill-editor": "3.0.6",
    "vue-ripple-directive": "2.0.1",
    "vue-router": "3.4.9",
    "vue-select": "3.11.2",
    "vue-slider-component": "3.2.11",
    "vue-sweetalert2": "4.1.1",
    "vue-toastification": "1.7.11",
    "vue-tour": "1.5.0",
    "vue-tree-halower": "1.8.3",
    "vue2-leaflet": "2.5.2",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.9",
    "@vue/cli-plugin-eslint": "~4.5.9",
    "@vue/cli-plugin-router": "~4.5.9",
    "@vue/cli-plugin-vuex": "~4.5.9",
    "@vue/cli-service": "~4.5.9",
    "@vue/eslint-config-airbnb": "^5.3.0",
    "@vuepress/plugin-medium-zoom": "^1.7.1",
    "babel-eslint": "^10.0.3",
    "eslint": "6.8.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-vue": "6.2.2",
    "sass": "1.32.*",
    "sass-loader": "^10.1.0",
    "vue-template-compiler": "2.x"
  }

3. Вопрос: Василий, почему они используют "bootstrap": "4.6.0" и "bootstrap-vue": "2.21.1", разве одного bootstrap-vue не достаточно? И вообще, я много где вижу подобное, например: "chart.js": "2.9.4" и "vue-chartjs": "3.5.1"?

bezumkinВасилий Наумкин
04.09.2022 17:08

2. Это никакая не главная проблема, да и вообще не проблема. Просто не все JS компоненты в курсе, что они могут быть запущены без браузера, на сервере - и могут быть не готовы к подобному.

Например, какой-нибудь lightbox при инициализации проверяет ширину экрана. Но на сервере

  • никакого экрана нет
  • лайтбокс там никто запускать и не будет

Поэтому такой компонент на сервере просто не нужно запускать, и нет проблем.

3. Ты путаешь https://getbootstrap.com и https://bootstrap-vue.org

Первый - собственно SASS\CSS стили и правила оформления, а второй - это набор компонентов, который реализует разный функционал на Vue, используя стили Bootstrap. Типа у открытой модалочки одни классы, а у закрытой другие - и меняет их Vue.

Нужные стили я подключаю в assets/scss/index.scss, а компоненты Bootstrap Vue в nuxt.config.js, чтобы работал tree shaking

Если я вдруг забуду подключить стили - компоненты всё равно работать будут, просто не будет оформления.

Точно так же стили Bootstrap используются и в React у компонентов React Bootstrap.

Ну и насчёт Сhart.js ты уже догадался, что это оригинальная библиотека и её адаптация для Vue. Как правило адаптации пишут сторонние разработчики, но вот например у Sortable.JS, который мы использовали - куча поддерживаемых фреймворков от основной команды.

inetloverАлександр Наумов
04.09.2022 19:55

Василий, спасибо за такой развернутый ответ!

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

inetloverАлександр Наумов
26.09.2022 13:11

Василий, добрый день!

@fortawesome/vue-fontawesome - мои любимые иконки, которые постоянно развиваются и обновляются

А как увидеть весь список иконок в наличии, которые я могу применить из пакета?

bezumkinВасилий Наумкин
26.09.2022 13:15

Смотри на их сайте, только обрати внимание, что мы используем те, которые solid и free.

https://fontawesome.com/search?o=r&m=free&s=solid

inetloverАлександр Наумов
26.09.2022 14:09

Ок, спасибо!!! А то я на их сайте растерялся, много у них там всего. А в @fortawesome/free-solid-svg-icons все svg в js файлах и их не посмотреть.

inetloverАлександр Наумов
27.09.2022 20:35

Василий, не подскажешь, в чем может быть проблема? В breadcrumbs.vue меняю <fa icon="home" /> на <fa icon="list" /> и получаю ошибку:

[dev:site]  ERROR  Could not find one or more icon(s) {
[dev:site]   prefix: 'fas',
[dev:site]   iconName: 'list'
[dev:site] } {}

В @fortawesome/vue-fontawesome файлы faList.js и faList.d.ts присутствуют.

bezumkinВасилий Наумкин
27.09.2022 20:58

Так надо ж подключить в конфиге nuxt.

Импортируются только явно указанные иконки, для уменьшения размера итогового приложения.

inetloverАлександр Наумов
27.09.2022 22:16

Василий, спасибо тебе большое! Обалдеть, как круто!

inetloverАлександр Наумов
11.11.2022 15:57

Василий, добрый день!

А у нас возможно к иконкам применить их другие свойства: (regular, light, thin, duotone)?

Например, как у них к корзине, код для Vue: <font-awesome-icon icon="fa-light fa-cart-shopping" /> , разные способы попробовал, так и не получилось.

bezumkinВасилий Наумкин
11.11.2022 16:08

Конечно! Нужно только:

  1. Доустановить варианты, которых тебе не хватает. Для платных нужны особые настройки.
  2. Указать тип явно через массив <fa :icon="['fal', 'cart-shopping']" />

Могут быть fal (light), far (regular), fad (duo), fas (solid) и fab (brands)

inetloverАлександр Наумов
11.11.2022 16:42

Супер!! Спасибо, большое!

inetloverАлександр Наумов
11.11.2022 18:55

Доустановить нужные типы

Василий, я правильно понял?:

cd frontend
yarn add @fortawesome/fontawesome-free-regular

Только так я могу еще установить брендовые иконки:

yarn add @fortawesome/fontawesome-free-brands

а вот таких пакетов нет:

yarn add @fortawesome/fontawesome-free-light
yarn add @fortawesome/fontawesome-free-thin
yarn add @fortawesome/fontawesome-free-duotone

Или типы устанавливаются, как-то иначе?

И так установить не выходит:

yarn add @fortawesome/fontawesome-free-duo
yarn add @fortawesome/fontawesome-free-light
bezumkinВасилий Наумкин
12.11.2022 11:58

а вот таких пакетов нет:

Они доступны только за деньги, я же дал ссылку на документацию.

inetloverАлександр Наумов
12.11.2022 15:30

Спасибо, разобрался!

inetloverАлександр Наумов
14.11.2022 03:09

Василий, добрый день!

У тебя fontawesome-free-solid вшит в VESP, а я устанавливаю:

cd frontend
yarn add @fortawesome/fontawesome-free-brands  

затем правлю конфиг site/nuxt.config.js

Config.fontawesome = {
  addCss: false,
  component: ['fa', 'fab'],
  icons: {
    solid: [
      'faHome',
      //...
    ],
    brands: ['fabVk'],
  },
}

Не работает, или нужно создавать плагин?

И еще, admin/nuxt.config.js по другому написано:

Config.fontawesome = merge(Config.fontawesome, {
  addCss: false,
  icons: {
    solid: union(Config.fontawesome.icons.solid, [
      'faUsers',
     //...
    ]),
  },
})

Как правильно писать в конфиге?

bezumkinВасилий Наумкин
14.11.2022 03:22

component: ['fa', 'fab'],

Это откуда взялось? Там строка, а не массив, ничего менять не нужно - посмотри документацию.

И еще, admin/nuxt.config.js по другому написано:

Это просто функции объединения для объектов и массивов из библиотеки lodash, чтобы добавить свои настройки к тем, которые уже есть в стандартном Vesp.

inetloverАлександр Наумов
14.11.2022 10:19

посмотри документацию.

Спасибо, что-то она мне не нагуглилась.

Это просто функции объединения для объектов и массивов из библиотеки lodash, чтобы добавить свои настройки к тем, которые уже есть в стандартном Vesp.

Ясно, спасибо!

born2slip
pishnaa istntome
22.11.2022 14:06
огромное спасибо! )
inetlover
Александр Наумов
14.11.2022 10:19
посмотри документацию. Спасибо, что-то она мне не нагуглилась. Это просто функции объединения для о...
bezumkin
Василий Наумкин
10.11.2022 05:46
Спасибо за поздравления!
inetlover
Александр Наумов
09.11.2022 17:08
Посмотрел в ДевТулсе свойство overscroll-behavior: none; присутствует, проверил в Chrome и Chromium ...
bezumkin
Василий Наумкин
03.11.2022 20:57
Поискать в исходниках ссылки на её адрес и поменять - скорее всего только nuxt.config.js. А зачем эт...
ni.kolokol@mail.ru
Николай Каленников
03.11.2022 19:43
Спасибо. Попробую тоже с нуля переставить
inetlover
Александр Наумов
03.11.2022 19:24
Спасибо!!! Все заработало!
bezumkin
Василий Наумкин
28.10.2022 05:23
В тексте есть подсказка // Контроллер требует новое разрешение protected $scope = &#x27;ord...
bezumkin
Василий Наумкин
27.10.2022 13:25
Понял, спасибо!
inetlover
Александр Наумов
23.10.2022 13:33
Понял, спасибо!