I have a div inside a vue component, I want to make the component draggable. I checked with many vue draggable plugins, but they have a seperate component for drag and not as a directive to just add like in angular draggable. Please help me with this?
You need to add vuedraggable to your node modules.
yarn add vuedraggable
and then:
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
}
and then you need something like this:
<draggable>
<div v-for=...>
</div>
</draggable>
https://github.com/SortableJS/Vue.Draggable
Related
Component 1:-
<template>
<blur :isData="isData">
<!-- logic/implementation of component 1 -->
<div>
</div>
</blur>
<template>
<script>
import blur from "../shared/Blur";
name: "component-1",
components: {
blur,
},
</script>
Just like this component1.vue, I have multiple components which are using blur component. Is it possible that instead of writing and importing blur in every single component, I can make some base class that can transfer the blur functionality in every single component in the folder. Can something like this be achieved in vue ?
With Vue.component you can create globally registered components:
Vue.component('my-component-name', {
// ... options ...
})
Find out more here
I have a problem with my VUE js project. I use the library VueperSlides and it's run correctly but my problem, is that the slider is imported in the components App.vue and it's displayed. I want to display the slider only in my Slider component.
I have a router link which runs correctly.
This is the APP.VUE component
This the HomePage (I want to put away this slider )
This is the Slider Vue
Just import it on your HomePage.vue:
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";
export default {
components: {
VueperSlides,
VueperSlide
},
// ...
}
Then use vueper-slides and vueper-slide components on your template.
I have a component in Vue which contains an img tag where the value of src is coming from props.
<template>
<div>
<img src="some url">
</div>
</template>
Similarly, this img tag is present in many of my components. For mocking it globally, I made a jest.init.js file where my code goes something like this
import VueTestUtils from "#vue/test-utils";
VueTestUtils.config.mocks["img"] = {src: "rytui"};
But it is not working. How should I do it?
some where. You need add setupFiles config in your jest.config.js like this
{
setupFiles: ["<rootDir>/jest.init.js"],
}
I have previously made some drag and drop functionality in vanilla JS which I have used in other projects. Now I have started a Vue.js project and I would like to use the same drag and drop functionality.
Is it possible to include a vanilla JS file in a Vue.js component? And how can it be done?
So far I have only tried to add a <script> tag in the head element in the index.html but it throws an error.
<script src="../src/js/drag-and-drop.js"></script>
You can import the script within your vue component with either
import
import '../src/js/drag-and-drop.js';
require
require('../src/js/drag-and-drop.js');
in the script section of your component.
e.g.
<template>
<!-- vue component markup -->
</template>
<script>
import drag from '../src/js/drag-and-drop';
export default {
name: 'you-vue-component',
}
</script>
I'm using Vue's single-file component spec (*.vue) for custom components in my application. Together with rollup and rollup-plugin-vue, I have observed the output in the DOM, for custom components I have written, to be composed of the equivalent html elements.
For example:
component-a.vue
<template>
<span>Hello World</span>
</template>
<script>
export default { name: 'component-a' };
</script>
component-b.vue
<template>
<component-a></component-a>
</template>
<script>
import ComponentA from './path/to/component-a.vue';
export default { name: 'component-b', components: { ComponentA } };
</script>
The above example, if component-a is added to the Vue mount component, will render to a the sum of the two component's template contents in the DOM, which in this case is simply a span element:
<span>Hello World<span>
Is it possible to achieve a rendered output in the DOM like the snippet below, such that custom elements' templates are represented in the DOM by tags which preserve their tag names?
<component-b>
<component-a>
<span>Hello World</span>
</component-a>
</component-b>
Inside your component-a.vue you should be able to achieve that by including some html code within your <template> tag as follow
component-a.vue:
<template>
<customelement>
// Other stuff
</customelement>
</template>
In this way you will be able to call your component-a from anywhere in your app, and to render an element named customelement.
Ideally you should use this "trick" to render standard HTML5 elements, otherwise you might see some error in your vue app console. Let me know how it goes.
Referring to the Vuejs documentation
https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
It should be noted that this limitation does not apply if you are
using string templates from one of the following sources:
String templates (e.g. template: '...')
Single-file (.vue) components
<script type="text/x-template">
If you use Vuejs like the examples above you won't get the result you wanted. So if you render your components in other ways you should get the result you wanted.