Fluid DnD

https://fluid-dnd.netlify.app/vue/introduction/introduction

Admin

Fluid DnD is a Vue.js library that provides flexible and customizable drag-and-drop functionalities...

Tokens:249

Snippets:3

Trust Score:7.6

Update:1 year ago

Show doc for...

Tokens:

Raw

### Install Fluid DnD Package

Source: https://fluid-dnd.netlify.app/vue/introduction/introduction/index

Instructions for installing the Fluid DnD library using common JavaScript package managers like npm, yarn, and pnpm.

```Shell
# with npm:

npm i fluid-dnd

# with yarn:

yarn add fluid-dnd

# with pnpm:

pnpm i fluid-dnd
```

--------------------------------

### Global Setup of Fluid DnD Composable in Vue

Source: https://fluid-dnd.netlify.app/vue/introduction/introduction/index

Demonstrates how to make the `useDragAndDrop` composable available throughout a Vue application by using Vue's `provide/inject` mechanism in the main application entry file.

```Vue
import { createApp } from "vue";

import App from './App.vue';

import { useDragAndDrop } from "fluid-dnd/vue";

const app = createApp(App);

app.provide('useDragAndDrop', useDragAndDrop);

app.mount('#app');
```

--------------------------------

### Local Import of Fluid DnD Composable in Vue

Source: https://fluid-dnd.netlify.app/vue/introduction/introduction/index

Shows how to import the `useDragAndDrop` composable directly into a Vue component's script section for local use.

```Vue
<script>

import { useDragAndDrop } from 'fluid-dnd/vue';

</script>
```

Tokens:

Raw