https://github.com/synw/vuepython
Edit and run Python code in Vuejs
https://github.com/synw/vuepython
Last synced: about 2 months ago
JSON representation
Edit and run Python code in Vuejs
- Host: GitHub
- URL: https://github.com/synw/vuepython
- Owner: synw
- License: mit
- Created: 2022-09-03T10:24:55.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-02-27T13:32:41.000Z (3 months ago)
- Last Synced: 2025-03-27T08:49:02.773Z (2 months ago)
- Language: Vue
- Homepage: https://synw.github.io/vuepython/
- Size: 937 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Python
[](https://www.npmjs.com/package/vuepython)
Edit and run Python code in Vuejs 3
Based on [usepython](https://github.com/synw/usepython): the Python code runs in
a [Pyodide](https://github.com/pyodide/pyodide) service worker, leaving the main ui thread alone
[Documentation](https://synw.github.io/vuepython/)
## Install
```
npm install vuepython
# or
yarn add vuepython
```
## Usage
### Load the Python runtime:
```ts
import { onBeforeMount } from 'vue';
import { usePython } from "usepython";
const py = usePython()
async function init() {
await py.load();
}
onBeforeMount(() => init())
```
A `PyStatus` widget is available to display the installation status:
```vue
import { PyStatus } from "vuepython"
```
### Code blocks
Once the runtime is loaded it is possible to use the `PyCodeBlock` code editor widget:
```vue
import "vuepython/style.css";
import "highlight.js/styles/stackoverflow-light.css" // or any highlightjs theme
import { PyCodeBlock } from "vuepython";
const code = `print('running a python script')`;
```
Use any [highlight.js theme](https://github.com/highlightjs/highlight.js/tree/main/src/styles) for
the code block. [Themes preview](https://highlightjs.org/static/demo/)
## Css
Import the necessary css
```ts
import "vuepython/style.css"
```
## Example
Example code:
```vue
Vue Python
import { onBeforeMount } from 'vue';
import { usePython } from "usepython";
import { PyStatus, PyCodeBlock } from "vuepython";
import "vuepython/style.css";
import "highlight.js/styles/stackoverflow-light.css"
const py = usePython()
const code = `print('starting python script')
a = 1
b = 2
print('finished python script')
c = a + b
# return value
c`;
async function init() {
await py.load();
}
onBeforeMount(() => init())
```