вступление

Команда и сообщество Nuxt недавно выпустили обширный Обозреватель модулей Nuxt, который позволяет сортировать модули Nuxt по популярности, типу и звёздам Github.

Пока я не увидел этого проводника, я понятия не имел, насколько надежной стала экосистема Nuxt Module. Мне удалось найти несколько действительно полезных модулей, которые я использовал в этом и других проектах.

Список может быть довольно сложным (в отличном смысле), поэтому я решил, что свел его к пяти, которые мне очень помогли. Я бы рекомендовал не только эти только, а всего пять, которые я считаю отличными!

TL: DR: Просто покажите мне модули!

  1. Nuxt / content
  2. Нукст / попутный ветер
  3. Nuxt / color-mode
  4. Nuxt / cloudinary
  5. Nuxt / feed

1. Nuxt / Content

Создавая этот сайт, я знал, что мне нужно найти автономную CMS для управления моим контентом. Я хотел создавать свой контент в Markdown, интерполировать компоненты Vue и иметь возможность передавать его в систему контроля версий. В содержимом Nuxt есть все это и многое другое!

Вот некоторые из самых приятных функций, которые я обнаружил:

  • Возможность вставлять любые переменные в статью с помощью фронтальной части YAML.
  • Переменные автоматической инъекции createdAt, updatedAt и toc (оглавление) для использования
  • «Дважды щелкните», чтобы редактировать прямо на странице, и сразу же увидите, как изменения отражаются.
  • Возможность интерполировать компоненты Vue прямо в уценку

В этом модуле гораздо больше возможностей, но я не могу его рекомендовать!

2. Nuxt / Попутный ветер

Если вы занимаетесь Front-end веб-разработкой, вы наверняка слышали о TailwindCSS. Если вы не знакомы, это CSS-фреймворк, ориентированный на полезность, с бесконечным количеством настроек и продуманными настройками по умолчанию. Если вы похожи на меня, то знаете, что однажды попробовав, назад уже не вернуться.

Этот модуль упрощает запуск и запуск Tailwind с вашим проектом Nuxt, а также позволяет ссылаться на конфигурацию Tailwind непосредственно в вашем приложении. Он также очень хорошо работает с Темным режимом и нашим следующим модулем в списке ...

3. Nuxt / Цветовой режим

Этот модуль позволяет невероятно легко определить предпочтительную цветовую схему пользователя при первом посещении или переключить и сохранить свой выбор для последующих посещений страницы. Он также очень хорошо работает с Nuxt / Tailwind.

Вы можете читать $colorMode.preference прямо в своих шаблонах или компонентах и ​​отображать различный контент в зависимости от их текущих предпочтений, а изменить их настройки цветового режима так же просто, как вызвать функцию toggle, подобную этой:

<template>
  <button @click="toggleColorMode">Toggle Color Mode</button>
</template>

<script>
export default {
  methods: {
    toggleColorMode() {
      this.$colorMode.preference = this.$colorMode.value == "light" ? "dark" : "light";
    }
  }
}
</script>

4. Nuxt / Cloudinary

Один из самых простых способов повысить производительность вашего веб-сайта - оптимизировать изображения. Nuxt / Cloudinary делает это тривиальным.

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

Майя Шавин поддерживает этот удивительный Модуль, который почти похож на волшебство. Модуль вставляет Cloudinary Instance ($ cloudinary) в ваш проект Nuxt, который вы можете использовать для некоторых действительно эффективных вещей.

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

const url = this.$cloudinary.image.url('sample', { crop: 'scale', width: 200 })

Вы даже можете получать удаленные изображения и выполнять те же преобразования.

const url = this.$cloudinary.image
              .fetchRemote(
                'https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png',
                { crop: 'scale', width: 200 })

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

5. Nuxt / feed

Этот модуль поможет вам создать канал RSS, Atom или JSON из содержимого вашего веб-сайта!

Вы можете подумать, а люди все еще используют RSS-каналы? Что ж, Крис Койер (основатель CSS Tricks и CodePen) делает!

Кто будет читать ваш личный блог, если в нем есть RSS-канал? Я буду читать ваш личный блог, потому что в нем есть RSS-канал. Pic.twitter.com/mtcyKhEVet

- Крис Койер (@chriscoyier) 7 января 2020 г.

Основная причина, почему это так здорово для меня, заключается в том, что если вы решите разместить кросс-пост на платформе, такой как Dev.to, вы действительно можете предоставить URL-адрес RSS-канала, и весь ваш контент станет черновиками, которые вы можете немедленно опубликовать. Хорошо известно, что кросс-публикация контента, изначально опубликованного на вашем сайте, может творить чудеса для вашего SEO-рейтинга (при условии, что вы определите правильный канонический URL для своего контента).

Кроме того, если вы используете Nuxt Content, вы можете сгенерировать канал, используя несколько методов, описанных в официальной документации!

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

Как я уже говорил, есть тонны потрясающих модулей, и это всего пять, которые мне действительно нравятся.

На момент написания этого блога в настоящее время доступно 146 модулей Nuxt для использования на modules.nuxtjs.org (и многие другие просто необходимо объединить с сайтом). Идите вперед, посмотрите и найдите то, что звучит интересно или полезно.

Развлекайтесь, исследуя удивительный мир модулей Nuxt!

Спасибо за прочтение.

Первоначально опубликовано на https://davidparks.dev 29 октября 2020 г.