https://github.com/michaelcharles/vue-append-to

A Vue directive to append an element in a component template to another part of the DOM.
https://github.com/michaelcharles/vue-append-to

Last synced: about 1 month ago
JSON representation

A Vue directive to append an element in a component template to another part of the DOM.

• Host: GitHub
• URL: https://github.com/michaelcharles/vue-append-to
• Owner: MichaelCharles
• License: mit
• Created: 2021-03-17T05:23:52.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-17T05:53:19.000Z (almost 4 years ago)
• Last Synced: 2024-11-22T14:25:38.438Z (about 1 month ago)
• Language: JavaScript
• Size: 7.81 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Append To Directive

You probably don't need to use this plugin. If you think you do, you should probably rethink your implementation. Defining elements in one component, and then magically teleporting them into another part of the page is probably not a great practice overall. You're better off defining your elements within the component where they'll actually show up. If you want to manipulate them from another component, you should use some kind of state management like Vuex.

However, if you (like me) have some kind of development constraints which are forcing you to do this, then this plugin will allow you to move an element from one component into any other element on the page that has an `id` using the `v-append-to` directive.

```



    


        
I was written in the blue box, but using the Vue Append To directive I was moved to the yellow box!

    

    


    



```


You can import this module and use it as shown below.

```

import Vue from 'vue'

import VueAppendTo from 'vue-append-to'

Vue.use(VueAppendTo)

new Vue({

    el: '#app',

});

```

Or you save the contents of `dist/index.js` within your project and include it as a script tag.

```

    

    

    

    

        app = new Vue({

            el: "#app"

        })

    

```