Welcome to Python and Vue.js integration’s documentation!

Contents:

Python and Vue.js gule

https://img.shields.io/pypi/v/python_vuejs.svg Updates Python 3 https://img.shields.io/pypi/l/python_vuejs.svg https://travis-ci.org/cstrap/python-vuejs.svg?branch=master https://coveralls.io/repos/github/cstrap/python-vuejs/badge.svg?branch=master Documentation Status

UPDATE

At the moment project is not supported anymore, due to the rapid evolving of the JavaScript ecosystem. It was born like a POF to allow me to study a bit of JavaScript and VueJS and try some hacks with click. Maybe in the future, the project could reborn. Thanks for using it!

The aim

Gluing Python and Vue.js with a set of scripts that automate the dev and build process.

Projects aims to be agnostic, just use it in order to automate the boring stuff to setup a Vue.js project.

The point is: you start with SPA app inside your current project and then extract it without having the dependency with backend framework, simply changing the npm build scripts.

Feel free to contribute with PRs and opening issues.

Thanks! Cheers! 🍻

Requirements

  • Python 2.7+ or 3.4+
  • nodejs > 5 and npm > 3 (could not work with new versions)
  • *nix like SO, Windows not supported

Commands reference

python-vuejs is shipped with a nice cli built on top of click.:

(env) $ pyvue --help
Usage: pyvue [OPTIONS] COMMAND [ARGS]...

Options:
--help  Show this message and exit.

Commands:
djangofy       Convert Vue.js webpack project into a django...
djbuild        Called inside `package.json`
djstartvueapp  Run click commands on bash.
installvuecli  Install vue-cli
startvueapp    Init vue project via vue-cli
vuebuild       Build Vue.js project via npm
vuecheck       Check if node > 5 and npm > 3 are installed
vuedev         Run frontend dev server via npm

Installation

To install python-vuejs, simply::

$ pip install python-vuejs

Vue.js - A quick overview

Wrappers around npm and vue. These commands automate the boring stuff of setup vue via vue-cli::

$ pyvue startvueapp myapp
$ cd myapp
$ pyvue vuedev
...

Before you go on production run::

$ cd myapp
$ pyvue vuebuild
...

Django - A quick overview

Run pyvue djstartvueapp into your django project directory:

(env) $ pyvue djstartvueapp myapp
...
Enjoy!

Command installs all dependencies and make the myapp a django app.

Features

  • Vue.js starter via vue-cli
  • Django integrations with no dependencies
  • Detach backend and frontend with less effort

TODO

Credits

This package was created with Cookiecutter and the audreyr/cookiecutter-pypackage project template.

Installation

Stable release

To install Python and Vue.js integration, run this command in your terminal:

$ pip install python_vuejs

This is the preferred method to install Python and Vue.js integration, as it will always install the most recent stable release.

If you don’t have pip installed, this Python installation guide can guide you through the process.

From sources

The sources for Python and Vue.js integration can be downloaded from the Github repo.

You can either clone the public repository:

$ git clone git://github.com/cstrap/python_vuejs

Or download the tarball:

$ curl  -OL https://github.com/cstrap/python_vuejs/tarball/master

Once you have a copy of the source, you can install it with:

$ python setup.py install

Usage

To use Python and Vue.js integration in a project:

pip install python-vue

Django quickstart

Assuming you work inside a virtualenv environment:

(env) $ pip install django
...
(env) $ pip install python-vuejs
...
(env) $ django-admin startproject djvue
...
(env) $ cd djvue
(env) $ ./manage.py startapp backend
...
(env) $ pyvue djstartvueapp frontend
...

That’s it.

frontend app is a vue project created via vue-cli behind the scene that is converted into a django app.

djstartvueapp script adds the __init__.py and urls.py scritps, then it edits the vue-project build files in order to have the correct django-app directory structure.

Develop process

Working on frontend app:

(env) $ cd frontend
(env) $ npm run dev  # or pyvue vuedev

This is decupled from django, used only for develop.

Build process

The build process is:

(env) $ cd frontend
(env) $ npm run build  # or pyvue vuebuild
(env) $ cd ..
(env) $ ./manage.py collectstatic --noinput

You can add the “frontend” build to your pipeline (eg if you use fabric, ansible or others)

Refer to the `Vue.js https://vuejs.org/`_ documentation for other stuff not related to python-vuejs wrappers.

The cool thing is that you can detach frontend app and deploy it wherever you want. Also, you can move it into another repo. 🦄

Happy coding! 👑

Contributing

Contributions are welcome, and they are greatly appreciated! Every little bit helps, and credit will always be given.

You can contribute in many ways:

Types of Contributions

Report Bugs

Report bugs at https://github.com/cstrap/python_vuejs/issues.

If you are reporting a bug, please include:

  • Your operating system name and version.
  • Any details about your local setup that might be helpful in troubleshooting.
  • Detailed steps to reproduce the bug.

Fix Bugs

Look through the GitHub issues for bugs. Anything tagged with “bug” and “help wanted” is open to whoever wants to implement it.

Implement Features

Look through the GitHub issues for features. Anything tagged with “enhancement” and “help wanted” is open to whoever wants to implement it.

Write Documentation

Python and Vue.js integration could always use more documentation, whether as part of the official Python and Vue.js integration docs, in docstrings, or even on the web in blog posts, articles, and such.

Submit Feedback

The best way to send feedback is to file an issue at https://github.com/cstrap/python_vuejs/issues.

If you are proposing a feature:

  • Explain in detail how it would work.
  • Keep the scope as narrow as possible, to make it easier to implement.
  • Remember that this is a volunteer-driven project, and that contributions are welcome :)

Get Started!

Ready to contribute? Here’s how to set up python_vuejs for local development.

  1. Fork the python_vuejs repo on GitHub.

  2. Clone your fork locally:

    $ git clone git@github.com:your_name_here/python_vuejs.git

  3. Install your local copy into a virtualenv. Assuming you have virtualenvwrapper installed, this is how you set up your fork for local development:

    $ mkvirtualenv python_vuejs
$ cd python_vuejs/
$ python setup.py develop

  4. Create a branch for local development:

    $ git checkout -b name-of-your-bugfix-or-feature

    Now you can make your changes locally.

  5. When you’re done making changes, check that your changes pass flake8 and the tests, including testing other Python versions with tox:

    $ flake8 python_vuejs tests
$ python setup.py test  # or make test
$ tox  # not ready

    To get flake8 and tox, just pip install them into your virtualenv.

  6. Commit your changes and push your branch to GitHub:

    $ git add .
$ git commit -m "Your detailed description of your changes."
$ git push origin name-of-your-bugfix-or-feature

  7. Submit a pull request through the GitHub website.

Pull Request Guidelines

Before you submit a pull request, check that it meets these guidelines:

  1. The pull request should include tests.
  2. If the pull request adds functionality, the docs should be updated. Put your new functionality into a function with a docstring, and add the feature to the list in README.rst.
  3. The pull request should work for Python 2.7, 3.3, 3.4 and 3.5. Check https://travis-ci.org/cstrap/python_vuejs/pull_requests and make sure that the tests pass for all supported Python versions.

Tips

To run a subset of tests:

$ python -m unittest tests.test_python_vuejs

Credits

Development Lead

Contributors

None yet. Why not be the first?

History

1.0.9 (2017-10-03)

  • Fix slash issue #21

1.0.7 (2017-10-03)

  • Better error message
  • Logging
  • Passing context - Click issue on calling function command

1.0.6 (2017-05-30)

  • Fix broken docs link

1.0.5 (2017-05-30)

  • Docs on readthedocs.org

1.0.4 (2017-05-30)

  • punch.py troubleshoting…

1.0.3 (2017-05-30)

  • Housekeeping

1.0.2 (2017-05-30)

  • Better coverage
  • Make commands
  • Dropped bumpversion in favour of punch.py

1.0.1 (2017-05-30)

  • Better coverage
  • Fix function name after reworking

1.0.0 (2017-05-29)

Beta release

  • Grouping all commands under pyvue
  • Added unit tests
  • Added travisCI configuration
  • Added coveralls and coverage configuration
  • Docs updated
  • Better semver

0.0.7 (2017-05-24)

  • Documentation
  • Fix djstartvueapp

0.0.4 (2017-05-24)

  • Alpha version

0.0.3 (2017-05-24)

  • Added full django support with single command djstartvueapp

0.0.2 (2017-05-24)

  • Added some docs and fix broken link

0.0.1 (2017-05-23)

  • First release on PyPI.
  • Provide a set of scripts in order to automate Vue.js project creation.

Indices and tables