vue-append-to
Advanced tools
Readme
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.
<div id="app" style="display: flex; flex-direction: column; height: 100%">
<div id="blue-box" style="background: cyan; flex: 1">
<p v-append-to="'yellow-box'">I was written in the blue box, but using the Vue Append To directive I was moved to the yellow box!</p>
</div>
<div id="yellow-box" style="background: yellow; flex: 1">
</div>
</div>
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.
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="./vue-append-to.js"></script>
</head>
<body>
<!-- content -->
<script>
app = new Vue({
el: "#app"
})
</script>
</body>
FAQs
A Vue directive to append an element in a component template to another part of the DOM.
We found that vue-append-to demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.