Сегодня конечно не четверг, но держите новый релиз Nuxt!

⚡️Обновили vue до v3.3.0
🙌 Обновили Nitropack до v2.4
⏰ Реализовали конфигурацию под разные environment

На самом деле там ещё много интересного, а я пойду обновлю накст у себя в проекте nuxi upgrade --force 😉


https://github.com/nuxt/nuxt/releases/tag/v3.5.0

В прошлую пятницу вышло большое обновление Nuxt v3.6.0, в этом релизе выкатили много всего

🧩 Дали возможность делать кастомный индикатор загрузки в spa режиме
⚡️ Улучшили производительность
🔥 Улучшили статичные серверные компоненты, теперь они не занимают основной бандл
🎨 Улучшили дедупликацию глобальных стилей
🎬 Подкрутили возможности для анимации страниц
✨ Добавили поддержку провайдеров, для генерации статических ресурсов (пока только для vercel и netlify)
💪 Улучшили поддержку типов
⚗️ Обновили Nitro до v2.5, там кстати много интересного, в том числе экспериментальная поддержка потокового рендеринга
🛠️ Добавили разных утилит для разработчиков модулей

Конечно же, ознакомиться со всем списком изменений можно в changelog

P.S. В ближайший месяц ждем версию 3.7, с еще большим списком улучшений 😉

#vue #vue3
https://habr.com/ru/articles/745012/

Всем дороу!

Правильно ли я понимаю, что если я у меня есть базовый интерфейс для эмитов, то заэкстендить с заменой типа значения я его не могу в новом синтаксисе?

Типа есть вот:

interface IBaseInputEmits {
'update:modelValue': [value: InputModelValueType]
'change': [value: Event]
}

И я не могу сделать

interface ISomeNewInput extends IBaseInputEmits {
'update:modelValue': [value: number | string]
'change': [value: number | string]
}

const emit = defineEmits<ISomeNewInput>()

Я вот что не пойму, вот есть у меня интерфейс для эмитов в новом синтаксисе

export interface IBaseInputEmits {
'update:modelValue': [value: InputModelValueType]
'focus': [value: Event]
'blur': [value: Event]
'input': [value: Event]
'change': [value: Event]
'keydown': [value: Event]
'keyup': [value: Event]
'request-start': [value: string | object]
'request-done': [value: string | object]
'request-failed': [value: string | object]
}

Я его пытаюсь использовать в defineEmits:

const emit = defineEmits<IBaseInputEmits>()

Почему шторму это не нравится?

Роадмап по Вую тут увидел
https://roadmap.sh/vue

Наканец та обновился шторм, новиночки туть

https://www.jetbrains.com/ru-ru/webstorm/whatsnew/

https://www.youtube.com/watch?v=y-hN5Q_lb9A

Ладно, кто ещё не видел посмотрите как Эван рассказывает о плюшках во Vue 3.3

И казалось бы, ну ввели новый удобный синтаксис для интерфейсов defineEmits в 3.3

Было так:

export interface IBaseEmits {
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}

А стало так:

export interface IBaseEmits {
  change: [id: number] 
  update: [value: string]
}

Но стоит этот интерфейс попытаться заюзать в defineEmits предварительно импортировав, получим ошибку

Issue тут: https://github.com/vuejs/core/issues/8457

И блять, вместо стандартного расширения интерфейса мне придется писать херню

defineEmits<IBaseEmits & {
keydown: [value: Event]
}>()

Выглядит как полная херота

Причём с пропсами это работает на изи, удобно чётко красиво:

import type {IBaseInputProps} from "~/types";

/**
* Autocomplete input props extended interface
*/
interface IAutocompleteProps extends IBaseInputProps {
debounce?: number;
options?: string[];
search?: Function;
minLength?: number;
maxSuggestions?: number;
aiSwitcher?: boolean;
}

/**
* Autocomplete input props object
*/
const props = withDefaults(defineProps<IAutocompleteProps>(), {
debounce: 100,
required: false,
search: undefined,
disabled: false,
minLength: 0,
maxSuggestions: 10,
aiSwitcher: false,
options: () => [],
});

Вот тут расписано поподробнее про эту тему
https://habr.com/ru/articles/735086/

Короче хз надо кому нет, но заметил что часто спрашивают, как в Nuxt 3 сделать nuxtServerInit из второго накста, ну так всё просто:
1. Создаём в папочке plugins файл init.server.ts (тут .server скажет наксту что этот плагин нужно юзать только на сервере)
2. И там собственно пишем
export default defineNuxtPlugin((ctx) => {
// и тут как обычно код вашего nuxtServerIniti
})

Нужен стор, например Pinia? Нет ничего проще

export default defineNuxtPlugin(({$pinia}) => {
const {someAction, someStateVariable} = useMyStore($pinia)
})

Карочи ребятки, я тут переписал и обновил свой плагин для Vue 3, и сделал отдельный для Vue 2. Конечно Issues, PR и вообще всё такое приветствуется (ну ставьте звёздочки пажалста ну чё вы как эти), мы же OpenSource как никак ❤️

Vue 3: https://github.com/vaban-ru/vue-bottom-sheet
Vue 2: https://github.com/vaban-ru/vue-bottom-sheet-vue2

Так, ребятки, вопрос.
У меня в компонент есть 2 метода, я указываю, что они публичные через defineExpose({ open, close })

Затем, что бы вызвать методы этого компонента я беру его рефку и вызываю их, типа:

<template>
<my-component ref="myComponent" />
</template>

<script setup lang="ts">
const myComponent = ref(null)
myComponent.value?.open()
</script>

И вот тут мне TS подсвечивает что таких методов у рефки конечно нет.

Вопрос: как дать понять Вую и ТСу, что у этой рефки есть такие методы?

То есть, мне нужно в дженерик рефки закинуть <что-то>, что бы вуй понял что там есть методы, но что?

О, новый Накст подвезли 😍
https://nuxt.com/blog/v3-7

✨ Nuxt 3.7.1

🚀 Улучшения производительности
- слегка уменьшился размер бандла
- предотвращен повторный рендеринг секции head в DOM

🩹 Исправления ошибок
📖 Обновление документации

https://github.com/nuxt/nuxt/releases/tag/v3.7.1