Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
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
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).