Single-file custom elements with vite
npm install vite-plugin-sfceПлагин vite для работы с пользовательскими элементами (Custom Elements) в формате однофайловых компонентов Vue.
Шаблоны пользовательских элементов интегрируются в HTML, что особенно полезно для MPA (Multi-Page Applications) приложений.
- Компиляция SFC - обработка однофайловых компонентов Vue как пользовательских элементов
- Интеграция стилей - CSS стили включаются в shadow DOM элементов
- Поддержка TypeScript - полная поддержка TypeScript в блоках скриптов
> Стили компонентов обрабатываются и добавляются непосредственно в шаблон элемента.
``bash`
npm install -D vite-plugin-sfce
vite.config.ts
`ts
import { defineConfig } from 'vite'
import vitePluginSfce from 'vite-plugin-sfce'
export default defineConfig({
plugins: [vitePluginSfce()],
})
`
components/CustomButton.sfce.vue
`vue
Кнопка
`
main.ts
`ts`
import CustomButton from './components/CustomButton.sfce.vue'
customElements.define('custom-button', CustomButton)
- Тип: string'.sfce.vue'`
- По умолчанию:
Расширения файлов для обработки как SFC компоненты пользовательских элементов.
MIT