Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nuxt-community/python-module
Write Nuxt 2 applications using Python! [Experimental]
https://github.com/nuxt-community/python-module
frontend javascripthon metapensiero nuxt nuxt-module nuxtjs python web website
Last synced: about 1 month ago
JSON representation
Write Nuxt 2 applications using Python! [Experimental]
- Host: GitHub
- URL: https://github.com/nuxt-community/python-module
- Owner: nuxt-community
- License: mit
- Created: 2018-02-01T08:11:19.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T23:47:02.000Z (about 2 months ago)
- Last Synced: 2024-09-30T02:26:08.498Z (about 1 month ago)
- Topics: frontend, javascripthon, metapensiero, nuxt, nuxt-module, nuxtjs, python, web, website
- Language: Vue
- Homepage: https://nuxt-python.surge.sh
- Size: 113 KB
- Stars: 202
- Watchers: 10
- Forks: 12
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @nuxtjs/python
[](https://npmjs.com/package/@nuxtjs/python)
[](https://npmjs.com/package/@nuxtjs/python)
[](https://circleci.com/gh/nuxt-community/python-module)
[](https://codecov.io/gh/nuxt-community/python-module)
[](https://david-dm.org/nuxt-community/python-module)
[](http://standardjs.com)
> Write Nuxt.js Apps in Python
[📖 **Release Notes**](./CHANGELOG.md)
## 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
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`
```js
{
modules: [
'@nuxtjs/python'
],
python: {
compiler: 'pj' // default
}
}
```
- In Vue files, Mark your script tags like this: ``.
- 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](https://gitlab.com/metapensiero/metapensiero.pj) 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](https://gitlab.com/metapensiero/metapensiero.pj#import-statements).
- 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](https://github.com/martim00/python-webpack-loader/blob/master/examples/vue-demo/src/App.vue).
## Usage
### Using `.vue` files
**TIP** If you use Vim you can get syntax highlighting for HTML, CSS *and* Python by installing [vim-vue](https://github.com/posva/vim-vue) plugin and applying [this patch](https://github.com/posva/vim-vue/pull/97).
`hello.vue`:
```html
<template>
<div>
Nuxt {{ best_lang }}
</div>
</template>
<script lang="py">
class Component:
def __init__(self):
self['data'] = lambda: { 'best_lang': 'Python' }
__default__ = Component()
```
### Using `.py` files for other nuxt files
`store/index.py`
```python
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`
```html
{{ $store.state.counter }}
+1
```
👉 For a working example, see [here](./example).
## Development
- Clone this repository
- Install dependencies using `yarn install` or `npm install`
- Start development server using `npm run dev`
## License
[MIT License](./LICENSE)
Copyright (c) Sebastian Silva
This module was started from the [module-template](https://github.com/nuxt-community/module-template) by Pooya Parsa and relies heavily on [python-webpack-loader](https://github.com/martim00/python-webpack-loader) by Martim Nascimento and [Javascripthon](https://gitlab.com/metapensiero/metapensiero.pj) by Alberto Berti.