Write Nuxt.js Apps in Python
- Write Nuxt 2 applications using Python!
- Currently only supports custom Javascripthon but in the future other compilers will also be expected to work.
- 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
- Add
@nuxtjs/pythondependency using yarn or npm to your project - Add
@nuxtjs/pythontomodulessection ofnuxt.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
compilerparameter)
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
compileroption to py-loader by using module options or in apythonsection in yournuxt.config.jsfile. -
Transcrypthas its own module system so in order to use it, you can use the CommonJS module standard (requireto import andmodule.exports) and it should work. See thepy-loaderVuejs example.
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>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__ = createStorepages/counter.vue
<template>
<h2>{{ $store.state.counter }}</h2>
<button @click="$store.commit('increment')">+1</button>
</template>👉 For a working example, see here.
- Clone this repository
- Install dependencies using
yarn installornpm install - Start development server using
npm run dev
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent