vue-instance-manager

:star2: About the Project

This project was created to provide an easy instance of a Vue.js component anywhere in another component. It is possible to display a registration screen or a modal with a message for example.

Something that is widely used in Vue applications to display components is to use the v-if directive. With VIM(vue-instance-manager), it is possible to replace this method in an easier and more readable way

:toolbox: Getting Started

:gear: Installation

Install vue-instance-manager with npm

  npm install vue-instance-manager

:eyes: Usage

Example use:

First import a component you want to instantiate.

Then import from vue-instance-manager

Create a function that will call the component instance, which can be called by the click event, for example. There are open and close methods that can be used.

<script>
import Vim from 'vue-instance-manager'
import Form from '@/components/Formulario.vue' //Component to be displayed
// @ is an alias to /src
'
export default {
  name: 'HomeView',
  methods:{
    OpenForm(){
      const Instance = Vim.instance(Form)

      Vim.open(Instance, 'body')
    }
  }
}
</script>

Once the instance is defined, it is possible to use the open and close functions

Function Instance

Receives by parameter the component that will be instantiated.

Function Open

Wait for a parameter to receive the defined instance and the html selector where it will be added (tag, class and id), this method can also listen to the close event that the component emits to the parent.

Function Close

Receives by parameter the instance of the component that will be removed, it can be called directly with Vim.Close or directly in the instantiated component by issuing to the parent with $emit('close')

:camera: Screenshots

---

:space_invader: Tech Stack

• JavaScript
• Vue.JS