@nuxtjs/python

Write Nuxt.js Apps in Python

Features

Write Nuxt 2 applications using Python!
Currently only supports custom Javascripthon but in the future other compilers will also be expected to work.

Try the example

Clone this repository and change directory into it

Install dependencies:

npm install                         # or use yarn

pip install -r requirements.txt

Run example: npm run dev

Setup in your own project

Add @nuxtjs/python dependency using yarn or npm to your project

Add @nuxtjs/python to modules section of nuxt.config.js

{
  modules: [
    '@nuxtjs/python'
  ],
  python: {
    compiler: 'pj'   // default
  }
}

In Vue files, Mark your script tags like this: <script lang="py">.
You may pass options to py-loader (currently it supports compiler parameter)

Choice of Python to Javascript compiler

Compiler default and recommended is Javascripthon but it is possible to use other compilers (see below).

Install the Javascripthon Python transpiler. For now you'll need the master branch e.g:

pip install -e git+https://gitlab.com/metapensiero/metapensiero.pj#egg=javascripthon

Note that Javascripthon requires that you have Python 3.5 (or better).
Javascripthon supports converting Python import statements to ES6 imports as used in Nuxt. Please note syntax conversions.
You can pass a compiler option to py-loader by using module options or in a python section in your nuxt.config.js file.
Transcrypt has its own module system so in order to use it, you can use the CommonJS module standard (require to import and module.exports) and it should work. See the py-loader Vuejs example.

Usage

Using `.vue` files

TIP If you use Vim you can get syntax highlighting for HTML, CSS and Python by installing vim-vue plugin and applying this patch.

hello.vue:

<template>
  <div>
      Nuxt {{ best_lang }}
  </div>
</template>

<script lang="py">
class Component:
  def __init__(self):
      self['data'] = lambda: { 'best_lang': 'Python' }

__default__ = Component()
</script>

Using `.py` files for other nuxt files

store/index.py

from vuex import Store

def increment(state):
    state.counter = state.counter + 1

def createStore():
    return Store(
      state={'counter': 0},
      mutations={'increment': increment}
    )

__default__ = createStore

pages/counter.vue

<template>
  <h2>{{ $store.state.counter }}</h2>
  <button @click="$store.commit('increment')">+1</button>
</template>

👉 For a working example, see here.

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using npm run dev

License

MIT License

This module was started from the module-template by Pooya Parsa and relies heavily on python-webpack-loader by Martim Nascimento and Javascripthon by Alberto Berti.

nuxt-community/python-module