Git Product home page Git Product logo

python-module's Introduction

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

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.