Петр Сергеев

Изначально nuxtjs(и его вдохновитель nextjs) - фреймворки, которые представляют собой готовый рецепт и набор правил для построения приложений на библиотеке Vue.js или React. Хотя можно обойтись без них и строить приложения как душе угодно, но удобнее иметь набор правил в сообществе и в команде. В процессе разработки фронтенд-приложений постепенно появляется необходимость в различных оптимизациях, в том числе в скорости и SEO, поэтому активно развивается бэкэнд для фронтенда. Он используется в основном для дополнительного кеширования и рендеринга на стороне сервера.

Конечно, вы можете подключаться к базе данных для получения информации. Для этого есть специализированные плагины и практики(можно прям гуглить nuxt 3 mysql). В целом, у вас есть доступ ко всем возможностям Node.js, так что всё в ваших руках. Чаще всего используются какие-либо ORM (Object-Relational Mapping), которые облегчают доступ к БД, убирая рутину на себя и предоставляя удобный доступ к данным. Например, Prisma.

В целом, обычно в Nuxt.js и подобных фреймворках напрямую с БД не работают, так как это ломает классическую архитектуру подобных приложений с разделением логики, масштабирования и т.п. Так что даже если на бэкенде Node.js, то это отдельные независимые сервисы, которые предоставляют каким-либо образом доступ к подготовленным данным из БД (например через REST API), а уже приложение на Next.js обращается к нему и в своей бэкенд-части и через браузер.

Резюмируя: Nuxt - для отображения интерфейса/фронтенда, даже при использовании рендринга на стороне сервера, получение обновление данных через API(REST/GraphQL/... ).
Express/Nest(что угодно другое бэкэндерское) - ядро бизнес логики, обработка данных, работа с БД, постороение API и тп.
Это если кратко, а так гуглите про архитектуру приложений, информации море, тема обширная.

У меня к примеру папка Icons и в паке IcomName.vue, внутри обычный содержащий svg-иконку. Когда нужна иконка, просто импортирую как обычный компонент Vue.

Я в vue не работал, но в react.js лучшим вариантом по производительности считается создание svg спрайта
иконки не входят в компоненты и не увеличивают размер бандла.

Думаю в vue будет лучшим тоже такой способ, вот загуглил и нашел даже библиотеку
https://www.npmjs.com/package/vue-svg-sprite

Если точно нужны inline svg, то vue-svg-loader - он делает автоматически ваш 1-й вариант.

Ещё есть vite-svg-loader - подключается как плагин к vite и удобен тем, что можно из vite.config менять как импортировать файл (url или raw).

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

через "v-if/v-else-if" рендерить ту, которая равна "close".

Если у вас всего 2-3 иконки - можно и так, но в общем случае - старайтесь не использовать длинные "портянки" if/else. Почти всегда можно обойтись без такого кода. (conponent is или defineAsyncComponent)

На самом деле, решение зависит от ситуации.

Если у вас есть не огромный(!) набор иконок для повсеместного использования - то вам нужен SVG Sprite. В других ответах уже накидали даже названий библиотек для Vue.

Если коротко, то использование выглядит следующим образом:

Кладете в public файл со спрайтами (обычно, сборка такого файла берут на себя библиотеки. Не хитрый SVG файл, который можно один раз собрать и юзать сборку)

А далее - элементарный компонент

Icon.vue

<template>
  <svg>
    <use :xlink:href="`path-to-sprite.svg#${iconName}`"></use>
  </svg>
</template>

<script lang="ts" setup>
  defineProps<{
    iconName: string;
  }>();
</script>

Использования будет выглядеть следующим образом:
App.vue

<template>
  <div>
    <Icon name="some-icon-1" />
    <Icon name="some-icon-2" />
    <Icon name="some-icon-3" />
  </div>
</template>

<script lang="ts" setup>
  import Icon from './Icon.vue';
</script>

Тут есть небольшой подводный камень, связанный с размерами (use не учитывает width, height, viewBox иконки, которая в Spritemap). Обходится элементарно - добавлением размера для svg с помощью CSS.

Если вам нужны 2-3 иконки - более рационально будет просто заинлайнить их в template. Не очень оптимизировано, зато не тратим кучи времени на ненужные телодвижения.

В случае с большим количеством иконок (более 500) SVG Sprite будет неэффективен ввиду того, что на каждую страницу будет загружаться тонна ненужных иконок. В таких случаях, лучше хранить иконки без спрайта, просто в ассетах и использовать ссылки на них в <use>.

Ссылки:
- https://developer.mozilla.org/en-US/docs/Web/SVG/E...

[^"] - любой символ кроме ковычки([] - набор, ^-инверсия набора), * - любое количество символов.

На самом деле твой вопрос: "Как подсветить ошибки типов typescript внутри шаблонов vue в webstorm".

Ответ: никак.

Они завязали всё на стороннюю тулзу и плагин к vscode, а не на языковой сервис typescript, потому любые ide кроме vscode в пролёте. Это очень расстраивает, да.

У меня есть личные намётки на эту тему, но оно движется медленно и постоянно откладывается, т.к. есть задачи по-актуальней, так что в ближайшее время можно не ждать.)

P.S. Могу пока порекомендовать плагин awesome console - он сделает кликабеьными все ссылки в консоли, включая переход к конкретной строчке.

Можно подготовить для книг «оглавление»: объект, где ключи id книг, значения сами объекты книг.
Затем останется заменить в массивах user'ов id книг на значения из словаря.

const library = books.reduce((acc, c) => (acc[c.id] = c, acc), {});
const result = users.map(user => {
  const books = user.books.map(id => library[id]);
  return { ...user, books };
});

Codepen

Объекты категорий складываете в массив, массив кладёте в хранилище. Маршруту добавляете параметр - идентификатор категории. Пробрасываете его в компонент маршрута, где используете его для извлечения данных категории из хранилища. Всё.

const obj = {
  one: '1',
  two: 2,
}

const variable = 'threeInner';

obj["three"] = {}
obj["three"][variable] = 33

console.log(obj)

должен быть более лаконичный способ, чем плодить такие переменные

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

Или это считается нормальной практикой?

Да, считается. У говнокодеров.

commit('namespace/someMutation', payload, { root: true })

но вообще если приложение новое, я бы смотрел в сторону pinia, намного удобнее.

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

А чего это вдруг "должна"?
Навигация между табами осуществляется стрелочками.
Вот статья с примерами на основе стандартов доступности:
https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

По табу должно переходит фокус на контент таба, а не на следующий таб.

без введения переменной (которая к тому же не избавляет от дублирования __element) так:

.block {
	&__element {
		&:hover &-sub {
			color: red;
		}
	}
}

но лучше block__element-sub от block__element не наследовать, если вы их считаете за разные элементы, а не вложенные. т.е. максимально читабельно так:

.block {
	&__element:hover &__element-sub {
		color: red;
	}
}

.block {
  $this: &;
  &__element:hover {
  #{$this}__element-sub {
    color: red;
  }
 }
}

Не выдумывайте, всё реактивно. Просто вы заменяете массив в хранилище (мутация remove) - после этого в хранилище у вас одни данные, а рендер вы выполняете на основе других.

На этом можно запускать условные ролики с ютуба внутри плеера.
Вот краткое пояснение по ютубу/вимео внутри тега video с помощью этого JS

Попробуйте передать туда

startAt()
 limit()

при запросе
Документация

C помощью axios это довольно просто делается

https://codesandbox.io/s/axios-ondownloadprogress-...

Можно использовать TransformStream.
Кода будет поменьше, чем если создавать "прокси" ReadableStream. Единственное отличие, что TransformStream "ленивый". Т.е. если закомментировать await newResponse.blob(); onProgress не будет вызываться, хотя данные были загружены.

Собственно вот онлайн демо.

const response = await fetch("https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg");
total.value    = parseInt(response.headers.get("content-length")) || 0;

function onProgress(chunk) {
    loaded.value += chunk.length;
}
const ts = new TransformStream({
    transform(chunk, controller) {
        onProgress(chunk);
        controller.enqueue(chunk);
    },
});
response.body.pipeThrough(ts);
const newResponse = new Response(ts.readable);

const blob = await newResponse.blob();

Имей в виду, что "content-length" может отсутствовать.

А также данные могут быть сжаты, если есть заголовок "content-encoding", который, к слову, по-умолчанию будет недоступен для кода при кросс-доменных запросах.

И при "content-encoding" в "content-length" значение всегда указано для сжатого респонса, а в коллбеке будут уже не сжатые данные. Т.е. loaded в таком случае будет больше значения total ("content-length")

---

"Прокси" ReadableStream:

const reader = response.body.getReader();
const readableStream = new ReadableStream({
    async start(controller) {
        while (true) {
            const {done, value} = await reader.read();
            if (done) { break; }
            onProgress(value);
            controller.enqueue(value);
        }
        controller.close();
        reader.releaseLock();
    },
    cancel() {
        void reader.cancel();
    }
});
const newResponse = new Response(readableStream);