|
26 | 26 | ```
|
27 | 27 | 3. Run example: `npm run dev`
|
28 | 28 |
|
29 |
| -## Setup |
| 29 | +## Setup in your own project |
| 30 | +
|
30 | 31 | - Add `@nuxtjs/python` dependency using yarn or npm to your project
|
31 | 32 | - Add `@nuxtjs/python` to `modules` section of `nuxt.config.js`
|
32 |
| -
|
33 |
| -```js |
34 |
| -{ |
35 |
| - modules: [ |
36 |
| - // Simple usage |
37 |
| - '@nuxtjs/python' |
38 |
| - ] |
39 |
| -} |
40 |
| -``` |
| 33 | + ```js |
| 34 | + { |
| 35 | + modules: [ |
| 36 | + '@nuxtjs/python' |
| 37 | + ], |
| 38 | + python: { |
| 39 | + compiler: 'pj' // default |
| 40 | + } |
| 41 | + } |
| 42 | + ``` |
| 43 | +- In Vue files, Mark your script tags like this: `<script lang="py">`. |
| 44 | +- You may pass options to py-loader (currently it supports `compiler` parameter) |
| 45 | + |
| 46 | +## Choice of Python to Javascript compiler |
| 47 | + |
| 48 | +Compiler default and recommended is **Javascripthon** but it is possible to use other compilers (see below). |
41 | 49 |
|
42 | 50 | - Install the [Javascripthon](https://gitlab.com/metapensiero/metapensiero.pj) Python transpiler. For now **you'll need the master branch** e.g:
|
43 | 51 | ```
|
|
46 | 54 |
|
47 | 55 | - Note that Javascripthon requires that you have **Python 3.5** (or better).
|
48 | 56 |
|
49 |
| -- In Vue files, Mark your script tags like this: `<script lang="py?compiler=pj">`. |
| 57 | +- 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). |
| 58 | +
|
| 59 | +- You can pass a `compiler` option to py-loader by using module options or in a `python` section in your `nuxt.config.js` file. |
50 | 60 |
|
51 |
| -- Please note syntax [conversions](https://gitlab.com/metapensiero/metapensiero.pj#import-statements). |
| 61 | +- `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). |
52 | 62 |
|
53 | 63 | ## Usage
|
54 | 64 |
|
55 | 65 | ### Using `.vue` files
|
56 | 66 |
|
57 |
| -**TIP** If you use Vim you can get the full experience with https://github.com/posva/vim-vue/pull/97 |
| 67 | +**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). |
58 | 68 |
|
59 | 69 | `hello.vue`:
|
60 | 70 |
|
|
65 | 75 | </div>
|
66 | 76 | </template>
|
67 | 77 |
|
68 |
| -<script lang="py?compiler=pj"> |
| 78 | +<script lang="py"> |
69 | 79 | class Component:
|
70 | 80 | def __init__(self):
|
71 | 81 | self['data'] = lambda: { 'best_lang': 'Python' }
|
|
0 commit comments