vue-plugin-django-utils 👋

🏠 Homepage

Vue plugin and helpers useful for integrating with Django, based on the techniques described in the article Django + Vue + Vite: REST Not Required and in Django Vue Cookiecutter

Install

Add as a dependency to your Vue project, e.g.

npm install vue-plugin-django-utils

Usage

In your Vue entrypoint(s),

import DjangoUtilsPlugin from 'vue-plugin-django-utils'
import {convertDatasetToProps} from 'vue-plugin-django-utils'

const rootEl = document.getElementById('my-root')
if (rootEl) {
    // Create app, passing the root element dataset as rootProp values
    const app = createApp(MyRootComponent, convertDatasetToProps({
        dataset: {...rootEl.dataset},
        component: MyRootComponent
    }))
  
    // Use additional plugin capabilities, including
    // 1) Django CSRF token provided as as 'csrfToken'
    // 2) Provide any key-value pairs in window.vueProvided
    // 3) Attached outerHTML of child elements w/ attribute data-django-slot=slotName in globalProperties.$djangoSlots
    app.use(DjangoUtilsPlugin, {rootElement: rootEl})
    app.mount(statusEl)
}

Author

👤 Mike Hoolehan

• Website: https://ilikerobots.github.io/
• Github: @ilikerobots

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator