vue-pythonpad-runner v1.0.2
Vue Pythonpad Runner
A Python 3 programming environment as an embeddable Vue.js component. Vue Pythonpad Runner allows users to edit and run multi-file Python 3 project based on Brython Runner.
This component is designed to serve web-based programming exercises for Python-based CS1 courses; the component supports following educational libraries: cs1robots, cs1media, and cs1graphics.
Demo
See our demo page to see vue-pythonpad-runner
in action.
Installation
Node.js
$ npm install vue-pythonpad-runner
Usage
Browser
The easiest way to use Vue Pythonpad Runner is to simply load the bundle script under ./lib
in the distribution. For example:
<script src="lib/vue-pythonpad-runner.bundle.js"></script>
Having this script tag, a Vue Pythonpad Runner component can be used after being registrated like this:
Vue.component('pythonpad-runner', VuePythonpadRunner)
CommonJS
Require the component like this:
var VuePythonpadRunner = require('vue-pythonpad-runner').default;
or with import
statement:
import VuePythonpadRunner from 'vue-pythonpad-runner';
Use the component in vue instances:
new Vue({
components: {
'vue-pythonpad-runner': VuePythonpadRunner,
},
});
Import and Use
Basic usage
<pythonpad-runner
id="runner"
ref="runner"
v-bind:init-src="src"
v-bind:init-files="files"
v-on:save="handleSave"
></pythonpad-runner>
<script>
new Vue({
el: '#runner',
data: {
src: 'import hello',
files: {
'hello.py': {
type: 'text',
body: 'print("hello world")',
},
},
},
methods: {
handleSave(save, done, error) {
if (save.autosave) {
console.log('State autosave is required.');
} else {
console.log('User requested to save the state.');
}
console.log('main.py code:', save.code);
console.log('files:', save.files);
done();
}
}
})
</script>
Development
Before running any scripts, install Node and Yarn on your system.
To install all dependencies, run:
$ yarn install
To serve the example web page for development, run:
$ yarn dev
Check out http://localhost:4000 on your web browser to see the example web page.
To build the library, run:
$ yarn build