All Projects → pearofducks → mount-vue-component

pearofducks / mount-vue-component

Licence: MIT license
a tiny utility to programatically create and mount Vue 3 components (e.g. a Vue.extend replacement)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to mount-vue-component

tcl-modules
A collection of pure Tcl, production-ready micro packages
Stars: ✭ 25 (-65.75%)
Mutual labels:  extend
QuestionTime
📚 Quora-like Single Page Application built with Django, Django REST Framework and Vue JS
Stars: ✭ 76 (+4.11%)
Mutual labels:  vue-3
WormHole
WormHole allows to share classes between Flutter and Native Platform (android / ios)
Stars: ✭ 36 (-50.68%)
Mutual labels:  extend
tale-pug
Tale Pug is the popular JavaScript Template Engine Pug, formerly Jade, for PHP!
Stars: ✭ 32 (-56.16%)
Mutual labels:  extend
chengpeiquan.com
My personal website. Base on Vite 2.0 and Vue 3.0. If you want to know how to use Vite to develop a project, you can refer to this repository.
Stars: ✭ 43 (-41.1%)
Mutual labels:  vue-3
macro
Customize code using closures
Stars: ✭ 135 (+84.93%)
Mutual labels:  extend
macroable
A simple ES6 class that can be extended to provide macros and getters functionality to your own classes
Stars: ✭ 25 (-65.75%)
Mutual labels:  extend
Polyfill
An artifact repository to assist writing Gradle Plugins for Android build system.
Stars: ✭ 68 (-6.85%)
Mutual labels:  extend
defaults-deep
Like `extend` but recursively copies only the missing properties/values to the target object.
Stars: ✭ 26 (-64.38%)
Mutual labels:  extend
vue-picture-cropper
A picture cropping tool that can be used in Vue 3.0.
Stars: ✭ 36 (-50.68%)
Mutual labels:  vue-3

mount-vue-component

install

yarn add mount-vue-component

use

import { mount } from 'mount-vue-component'
import { h } from 'vue'

const comp = {
  props: ['name'],
  setup: (props) => () => h('h1', `Hello, ${props.name}!`),
  unmounted() { console.log("Bye") },
  mounted() { console.log("Hi") }
}
const { vNode, destroy, el } = mount(comp, { props: { name: 'world' } })

api

mount(component, { props, children, element, app })

  • component: required, the component to be created/mounted
  • props: props to be passed onto the component, this can include HTML attributes like id or class
  • children: components to be rendered as children of component
  • element: if specified, the element to mount the component into, if not specified, a div will be created
  • app: the Vue app instance from createApp, if provided will be bound to the component's appContext
returns { vNode, destroy, el }
  • vNode: the instance of the component provided
  • destroy: a function that will unmount and destroy the component
  • el: will provide the HTML element the component is mounted into
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].