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

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

Подвезли обновку на Nuxt кстати, за новость пасиба @ibochkarev
https://github.com/nuxt/nuxt/releases/tag/v3.7.2

vue-faq.org — FAQ о фронтенде в целом и Vue в частности (этот проект крайне специфичный и транслирует мнения конкретно одного человека)

И я кстати хз почему комментарии под этим постом не работают, а под другими работают, Дуров ты чиво наделал?

https://habr.com/ru/articles/760636/

#nuxt3 #vue3 #nuxt #vue #wysiwyg

Nuxt 3, Vue 3, CKEditor и прочие WYSIWYG

https://habr.com/ru/articles/763252/

#nuxt #eng

Кастомный индикатор загрузки в Nuxt 3

https://weekly-vue.news/issues/112

Обновление Nuxt до 3.7.4
Но ничего критичного, просто фиксы

https://github.com/nuxt/nuxt/releases