@nuxtjs/python

Write Nuxt.js Apps in Python

📖 Release Notes

Features

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

Try the example

1. Clone this repository and change directory into it
2. Install dependencies:

   npm install                         # or use yarn
   
   pip install -r requirements.txt
   

3. 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

Copyright (c) Sebastian Silva [email protected]

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.