Skip to content

Instantly share code, notes, and snippets.

@icarito
Last active February 17, 2018 15:25
Show Gist options
  • Save icarito/61e7a810bd9fefa81341f440f40bc6be to your computer and use it in GitHub Desktop.
Save icarito/61e7a810bd9fefa81341f440f40bc6be to your computer and use it in GitHub Desktop.

@nuxtjs/python

npm (scoped with tag) npm CircleCI Codecov Dependencies js-standard-style

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.

Setup

  • Add @nuxtjs/python dependency using yarn or npm to your project
  • Add @nuxtjs/python to modules section of nuxt.config.js
{
  modules: [
    // Simple usage
    '@nuxtjs/python'
 ]
}
  • 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).

  • In Vue files, Mark your script tags like this: <script lang="py?compiler=pj">.

  • Please note syntax conversions.

Usage

Using .vue files

TIP If you use Vim you can get the full experience with posva/vim-vue#97

hello.vue:

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

<script lang="py?compiler=pj">
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 sebastian@fuentelibre.org

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment