Vue Mountable is a tiny DOM Library for Vue 3.

Overview

Vue Mountable

Vue Mountable is a tiny DOM Library for Vue 3.

Features

• Native Vue 3 Teleport
• Slotting, Events & Props
• use inject and provide
• Mount multiple Children Components
• Mount HTML Tag's
• Support for defineComponent and defineAsyncComponent
• Support for multiple Vue Instances
• Hot-Module Reloading for vite

Usage

Install

npm i vue-mountable -D

Add it to main.js

import { VueMountable } from 'vue-mountable'

// created vue instance
app.use(VueMountable());

Getting Started

// main.vue

<script>
import { useComponent } from 'vue-mountable';
import test from 'components/test.vue';

export default {
	setup() {
		const { mount, destroy } = useComponent();

		function addTest() {
			mount(test, {
				props: {
					message: 'This is a Test Component'
				}
			});
		}

		return {
			addTest
		}
	}
}
script>
{{ message }}
">
// test.vue
<template>
	<div ref="test">
		{{ message }}

		<button @click.prevent="close">
			Remove Test Component
		button>
	div>
template>

<script>
import { useComponent } from 'vue-mountable';

export default {
	name: 'test', // this needs to be defined
	props: {
		message: String
	},
	setup() {
		const test = ref(null); // template ref
		const { destroy } = useComponent();

		function close() {
			destroy(test.value);
		}

		return {
			close
		}
	}
}
script>

Examples

Tiny List of what you can do with Mountable:

Configuration

Current available Function Parameters:

const {
	mount, // mount function
	destroy, // destroy function
	destroyAll, // destroy all mounted elements
	id // current app instance id
} = useComponent();

mount(
	/**
	 * Vue Component File
	 * needs to have the "name" attribute
	*/
	component,
	{
		/**
		 * Native Vue Props
		 */

		props: {},

		/**
		 * Vue Children Components
		 * Array with Vue Components or Object array with Mount Options: component, children, props, target, slot
		 * @props {}
		 * @children []
		 * @target string
		 * @slot string
		 */
		children: [],

		/**
		 * Teleportation Target
		 * Can be defined in the loaded component or here
		 * Note: If the component has a target prop, it will override this option
		 * String referencing an DOM Target
		 */
		target : ''
	}
);

destroy(
	/**
	 * DOM Element
	 */

	element
);

Limitations

At the Moment the useComponent Function is only available in the setup Lifecycle. This is due to the usage of inject/provide from Vue 3. Also there is no Devtools Support, but its in the works! That means added Components wont be visible in Devtools for now..

License

MIT License © 2020-2021 Leon Langer

You might also like...
Collection of essential Vue Composition Utilities for Vue 2 and 3
Collection of essential Vue Composition Utilities for Vue 2 and 3

Collection of essential Vue Composition Utilities 🚀 Features 🎪 Interactive docs & demos 🕶 Seamless migration: Works for both Vue 3 and 2 ⚡ Fully tr

Transforms Vue.js 2.0 SFCs to Vue.js 3.0 Composition API syntax.
Transforms Vue.js 2.0 SFCs to Vue.js 3.0 Composition API syntax.

vue2-migration-helper Transforms Vue.js SFCs to composition api syntax. Install npm i vue2-migration-helper CLI # convert all .vue files in source dir

🤲 Use Vue 3's Fragment feature in Vue 2 to return multiple root elements

🤲 Vue 2 fragment directive to return multiple root elements

JSX for Vue 3 -  Babel Plugin JSX for Vue 3.0
JSX for Vue 3 - Babel Plugin JSX for Vue 3.0

JSX for Vue 3 - Babel Plugin JSX for Vue 3.0

Paystack module for Vue that supports Vue 2 & 3.
Paystack module for Vue that supports Vue 2 & 3.

Vue-Paystack2 is a Paystack payment gateway integration for Vue which provides Universal support for Vue 2 & 3 Table of Contents ✨ Install ✨ Usage 📖

🛠️Vue kit of useful Vue Composition API functions
🛠️Vue kit of useful Vue Composition API functions

🛠️ Vue kit of useful Vue Composition API functions.

Vue Json Pretty - A Vue component for rendering JSON data as a tree structure.
Vue Json Pretty - A Vue component for rendering JSON data as a tree structure.

Vue Json Pretty A Vue component for rendering JSON data as a tree structure. Now it supports Vue3 at least. If you still use Vue2, see 1.x. English |

Vue directive for conditional rendering element on screen smaller than breakpoints
Vue directive for conditional rendering element on screen smaller than breakpoints

vue-not-visible Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints; 📺 Demo Install $ npm install --save v

Provides reactivity window size properties for Vue.js

vue-window-size Provides reactivity window size properties for Vue.js. Install for Vue v3 The following command installs vue-window-size v1. $ yarn ad

Comments
  • Can't be used in composables/outside setup

    Can't be used in composables/outside setup

    Current big Issue is that calling the useComponent like this:

    > useDialog.js
    import { useComponent } from 'vue-mountable';
    
    export function useDialog() {
    	const { mount, destroy } = useComponent();
    
    	const component = mount(dialog);
    }
    
    > app.vue
    <script setup>
    function test() {
        useDialog() // error
    }
    </script>
    
    

    wont work as there is no vue instance, while calling it inside setup() or script setup will work like it should.

    bug help wanted has workaround 
    opened by Subwaytime 2
  • Add support for multiple apps

    Add support for multiple apps

    service.ts shares container, node and instance between usages. This causes problems if the plugin is installed on multiple apps. e.g.:

    import { createApp } from 'vue'
    import { VueMountable } from 'vue-mountable'
    import App from './App.vue'
    
    const app = createApp(App)
    app.use(VueMountable)
    app.provide('msg', 'app1')
    app.mount('#app')
    
    const app2 = createApp(App)
    app2.use(VueMountable)
    app2.provide('msg', 'app2')
    app2.mount('#app2')
    

    The functions provided by useComponent will then be bound to the second app in both cases. So, for example, attempting to inject the msg from inside a component mounted by VueMountable will always show app2, irrespective of which app it is in.

    opened by skirtles-code 2
  • CDN / global build

    CDN / global build

    As far as I can tell, there isn't currently a build of this library that can be used directly from a CDN via a <script> tag.

    Even though such builds aren't typically used in production, they are very commonly used when asking questions (Discord, SO, etc.) and for reporting issues on GitHub.

    opened by skirtles-code 1
  • Roadmap

    Roadmap

    Roadmap

    • [ ] Devtools Support
    • [x] Allow resolveComponent and resolveDynamicComponent
    • [x] Allow defineComponent and defineAsyncComponent
    • [x] Allow HTML Tags to get mounted directly (this should make things easier then having to use a vue component every single time)
    • [ ] Add native Vue Transitions
    • [x] Remove teleported DOM Message after destroying an Element (it just gets messy after multiple mounting usages)
    • [x] Multi Instance Support
    • [ ] CDN Support (script tag)
    • [x] Better Typing (to many any's)

    Let me know if there are other Features that would work well with this Library!

    opened by Subwaytime 2
Releases(v0.0.11)
  • v0.0.11(Apr 30, 2022)

    Tiny rewrite of the project

    • works now outside of setup lifecycle
    • fix some typing issues
    • tiny performances fixes
    • update examples
    • update README

    !!BREAKING CHANGES!!

    • remove useComponent
    • mount, destroy and destroy can now directly be imported from vue-mountable
    • add useMountable, this just allows you to checkout the running mountable service with the vue instance and its currently mounted elements
    Source code(tar.gz)
    Source code(zip)
  • v0.0.10(Apr 9, 2022)

  • v0.0.9(Apr 4, 2022)

    • fix .mjs and .js imports, it caused the library to not work properly
    • add support for script setup
    • fix component name
    • update project example
    • update project packages
    Source code(tar.gz)
    Source code(zip)
  • v0.0.8(Sep 9, 2021)

    • add destroy all function, to remove any mounted element alltogether
    • fix certain mounting issues
    • fix tiny performance issues
    • fix utils and docs

    BREAKING CHANGE:

    • mount will now return a DOM Node rather then a VNode. This makes it easier to work with them inside your Composition API.
    Source code(tar.gz)
    Source code(zip)
  • v0.0.7(Jul 24, 2021)

  • v0.0.6(Jul 1, 2021)

  • v0.0.5(Jun 30, 2021)

  • v0.0.4(Jun 26, 2021)

    • Fix Childrencomponent Mounting It should be now possible to mount Vue Components either directly in an Array (resulting them to get slotted to default) or mounting them as a mountable Object (as seen in the example folder)
    • Fix Typing
    • Update Performance (should be even faster now for HMR)
    • Fix Service structure readability
    • Update Example
    • The Roadmap can now be found here: Roadmap
    • Minor Bugfixes
    Source code(tar.gz)
    Source code(zip)
  • v0.0.3(Jun 22, 2021)

DOM helpers plugin for Vue.js using gaspard

Vue-gaspard DOM helpers plugin for Vue.js using gaspard Getting started Installing npm yarn bower unpkg npm install vue-gaspard yarn add vue-gaspard b

Luca 7 Jul 30, 2020
The word highlighter library for Vue 2 and Vue 3.

The word highlighter library for Vue 2 and Vue 3.

ryo 122 Jan 3, 2023
A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition API.

?? vue-concurrency Inspired by ember-concurrency. A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition

Martin Malinda 268 Dec 26, 2022
A JavaScript library to dependency injection for Vue.js

vue-injector Dependency Injection for Vue.js. This is vue-injector which works only with Vue 2.0 Introduction Vue Injector — Dependency Injection libr

Scand Ltd. 18 Oct 1, 2022
Lightweight dependency injection library for Vue.js

STFALCON-VUE-DI STFALCON-VUE-DI is a missed piece of vue apps. This library allows you to simplify an injection of the vue components into your app. I

Stfalcon LLC 10 Oct 20, 2022
A plug-in that imports component library styles on demand

vite-plugin-style-import English | 中文 A plug-in that imports component library styles on demand Why only import styles Because vite itself has importe

Vben 361 Jan 6, 2023
Library of utilities, which are compatible with any important JavaScript environment and that do not need external dependencies.

Library of utilities, which are compatible with any important JavaScript environment and that do not need external dependencies.

e.GO Mobile 0 Aug 17, 2021
Library of utilities, which are compatible with any important Node-like environment.

Library of utilities, which are compatible with any important Node-like environment.

e.GO Mobile 0 Aug 17, 2021
Internationalization plugin for Vue.js - fluent-vue is Vue.js integration for Fluent.js

Internationalization plugin for Vue.js - fluent-vue is Vue.js integration for Fluent.js

Ivan Demchuk 164 Dec 28, 2022
Vue Use Utilities build on top of vue-demi & @vue/compostion-api

Vue Use Utilities Vue Use Utilities build on top of vue-demi & @vue/compostion-api. It works both for Vue 2 & 3. ✨ Features ?? Composable Utilities ??

Vue Blocks 28 Dec 12, 2022