https://github.com/mattdodge/pointofvue

A simple, opinionated way to incorporate VueJS in Django applications
https://github.com/mattdodge/pointofvue

django vuejs

Last synced: 5 days ago
JSON representation

A simple, opinionated way to incorporate VueJS in Django applications

• Host: GitHub
• URL: https://github.com/mattdodge/pointofvue
• Owner: mattdodge
• Created: 2019-06-25T20:14:52.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-11T04:43:49.000Z (about 1 year ago)
• Last Synced: 2024-09-15T15:51:53.853Z (2 months ago)
• Topics: django, vuejs
• Language: Python
• Size: 19.5 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PointOfVue

A simple, opinionated way to incorporate VueJS into your Django applications

## Installation

```

pip install PointOfVue

```

Add `pointofvue` to your Django installed apps:

```python

INSTALLED_APPS = [

    # other apps ...

    'pointofvue',

]

```

## Basic Usage

In your view, import `pointofvue` and send a `pointofvue.VueContext` instance to your template

```python

import pointofvue

def view_handler(request):

    vue_ctx = pointofvue.VueContext()

    vue_ctx.set_data('var1', 'My value')

    return render(request, 'template.html', {

        "vue_ctx": vue_ctx,

    })

```

In your template, write your Vue code in a `#app` element and use `${` and `}` for accessing Vue data. Then load the `pointofvue` templates and call the `{% vue %}` tag with your `VueContext` to load VueJS and create an app.

```html



    The value of 'var1' is ${ var1 }



{% load pointofvue %}

{% vue vue_ctx %}

```

## Custom JavaScript

It is likely that you won't be able to get away with just writing HTML Vue alone, you may need to define methods and other JS native entities in custom JavaScript.

 > **Note:** pointofvue encourages you to not write inline JavaScript in your Django HTML templates. Write separate JS files and serve them via staticfiles instead

Define a Vue entry point that exports your Vue data. It may look like this:

```javascript

import MyCustomComponent from './my-component.js';

const components = {

    MyCustomComponent,

};

export {

    components,

};

```

Build that JS file (target as a library if using vue-cli-service). Then register your script with the Python VueContext in your view:

```python

vue_ctx.add_script('myscript')

```

Now you can use your custom component in your template:

```html



    My Custom Component

    



```


## Development

### Releasing

I use [bump2version](https://github.com/c4urself/bump2version) to manage version bumping. This will update the version number in the library, commit it, and create a version tag.

```bash

bump2version minor

git push --follow-tags

```