Skip to content

Commit f12c82c

Browse files
Pooya Parsaicarito
Pooya Parsa
authored and
icarito
committed
✨ add a working example
1 parent bd1f7be commit f12c82c

File tree

13 files changed

+289
-30
lines changed

13 files changed

+289
-30
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ node_modules
77
.DS_STORE
88
coverage
99
dist
10-
*.swp
10+
*.swp
11+
src

‎README.md

+14-9
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,22 @@
3939
## Usage
4040

4141
### Using `.vue` files
42+
4243
**TIP** If you use Vim you can get the full experience with https://github.com/posva/vim-vue/pull/97
4344

4445
`hello.vue`:
46+
4547
```html
4648
<template>
4749
<div>
4850
Nuxt {{ best_lang }}
4951
</div>
5052
</template>
53+
5154
<script lang="py?compiler=pj">
5255
class Component:
53-
54-
def __init__(self):
55-
self['data'] = lambda: { 'best_lang': 'Python' }
56+
def __init__(self):
57+
self['data'] = lambda: { 'best_lang': 'Python' }
5658
5759
__default__ = Component()
5860
</script>
@@ -61,30 +63,33 @@ __default__ = Component()
6163
### Using `.py` files for other nuxt files
6264

6365
`store/index.py`
64-
```python
65-
from vuex import Vuex
6666

67+
```python
68+
from vuex import Store
6769

6870
def increment(state):
6971
state.counter = state.counter + 1
7072

71-
7273
def createStore():
73-
return Vuex.Store(state={'counter': 0},
74-
mutations={'increment': increment})
75-
74+
return Vuex.Store(
75+
state={'counter': 0},
76+
mutations={'increment': increment}
77+
)
7678

7779
__default__ = createStore
7880
```
7981

8082
`pages/counter.vue`
83+
8184
```html
8285
<template>
8386
<h2>{{ $store.state.counter }}</h2>
8487
<button @click="$store.commit('increment')">+1</button>
8588
</template>
8689
```
8790

91+
👉 For a working example, see [here](./example).
92+
8893
## Development
8994

9095
- Clone this repository

‎example/components/NuxtLogo.vue

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="VueToNuxtLogo">
3+
<div class="Triangle Triangle--two"/>
4+
<div class="Triangle Triangle--one"/>
5+
<div class="Triangle Triangle--three"/>
6+
<div class="Triangle Triangle--four"/>
7+
</div>
8+
</template>
9+
10+
<style>
11+
.VueToNuxtLogo {
12+
display: inline-block;
13+
animation: turn 2s linear forwards 1s;
14+
transform: rotateX(180deg);
15+
position: relative;
16+
overflow: hidden;
17+
height: 180px;
18+
width: 245px;
19+
}
20+
21+
.Triangle {
22+
position: absolute;
23+
top: 0;
24+
left: 0;
25+
width: 0;
26+
height: 0;
27+
}
28+
29+
.Triangle--one {
30+
border-left: 105px solid transparent;
31+
border-right: 105px solid transparent;
32+
border-bottom: 180px solid #41B883;
33+
}
34+
35+
.Triangle--two {
36+
top: 30px;
37+
left: 35px;
38+
animation: goright 0.5s linear forwards 3.5s;
39+
border-left: 87.5px solid transparent;
40+
border-right: 87.5px solid transparent;
41+
border-bottom: 150px solid #3B8070;
42+
}
43+
44+
.Triangle--three {
45+
top: 60px;
46+
left: 35px;
47+
animation: goright 0.5s linear forwards 3.5s;
48+
border-left: 70px solid transparent;
49+
border-right: 70px solid transparent;
50+
border-bottom: 120px solid #35495E;
51+
}
52+
53+
.Triangle--four {
54+
top: 120px;
55+
left: 70px;
56+
animation: godown 0.5s linear forwards 3s;
57+
border-left: 35px solid transparent;
58+
border-right: 35px solid transparent;
59+
border-bottom: 60px solid #fff;
60+
}
61+
62+
@keyframes turn {
63+
100% {
64+
transform: rotateX(0deg);
65+
}
66+
}
67+
68+
@keyframes godown {
69+
100% {
70+
top: 180px;
71+
}
72+
}
73+
74+
@keyframes goright {
75+
100% {
76+
left: 70px;
77+
}
78+
}
79+
</style>

‎example/components/PythonLogo.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<svg width="245px" height="180px" viewBox="0 0 112 113" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3+
<defs>
4+
<linearGradient x1="1.06341024e-07%" y1="9.14856261e-08%" x2="74.5209927%" y2="64.1103734%" id="linearGradient-1">
5+
<stop stop-color="#5A9FD4" offset="0%"></stop>
6+
<stop stop-color="#306998" offset="100%"></stop>
7+
</linearGradient>
8+
<linearGradient x1="49.9999998%" y1="82.2756107%" x2="23.4426562%" y2="44.914431%" id="linearGradient-2">
9+
<stop stop-color="#FFD43B" offset="0%"></stop>
10+
<stop stop-color="#FFE873" offset="100%"></stop>
11+
</linearGradient>
12+
</defs>
13+
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
14+
<g id="python-logo-generic" fill-rule="nonzero">
15+
<path d="M55.510156,0.3979729 C50.926503,0.4192712 46.549217,0.8101906 42.697656,1.4917229 C31.35144,3.4962267 29.291407,7.691825 29.291406,15.429223 L29.291406,25.647973 L56.103906,25.647973 L56.103906,29.054223 L29.291406,29.054223 L19.228906,29.054223 C11.436447,29.054223 4.6131468,33.73794 2.4789058,42.647973 C0.0170858,52.860939 -0.0921093,59.233996 2.4789058,69.897973 C4.3848341,77.835825 8.936449,83.491721 16.728906,83.491723 L25.947656,83.491723 L25.947656,71.241723 C25.947656,62.391821 33.6048,54.585475 42.697656,54.585473 L69.478906,54.585473 C76.933857,54.585473 82.885159,48.447309 82.885156,40.960473 L82.885156,15.429223 C82.885156,8.162884 76.755176,2.7044455 69.478906,1.4917229 C64.872919,0.7249976 60.093809,0.3766746 55.510156,0.3979729 Z M41.010156,8.616723 C43.779703,8.616723 46.041406,10.915369 46.041406,13.741723 C46.041404,16.558059 43.779703,18.835473 41.010156,18.835473 C38.23068,18.835472 35.978906,16.558058 35.978906,13.741723 C35.978905,10.91537 38.23068,8.616723 41.010156,8.616723 Z" id="path1948" fill="url(#linearGradient-1)"></path>
16+
<path d="M86.228906,29.054223 L86.228906,40.960473 C86.228906,50.191228 78.403011,57.960472 69.478906,57.960473 L42.697656,57.960473 C35.361823,57.960473 29.291407,64.238956 29.291406,71.585473 L29.291406,97.11672 C29.291406,104.38306 35.609994,108.65704 42.697656,110.74172 C51.184987,113.23733 59.323893,113.68835 69.478906,110.74172 C76.229061,108.78733 82.885159,104.85411 82.885156,97.11672 L82.885156,86.897973 L56.103906,86.897973 L56.103906,83.491723 L82.885156,83.491723 L96.29141,83.491723 C104.08387,83.491723 106.98766,78.056315 109.69765,69.897973 C112.49698,61.499087 112.37787,53.422197 109.69765,42.647973 C107.77187,34.890532 104.09378,29.054223 96.29141,29.054223 L86.228906,29.054223 Z M71.166406,93.710473 C73.945884,93.710476 76.197656,95.98789 76.197656,98.80422 C76.197654,101.63057 73.945881,103.92922 71.166406,103.92922 C68.396856,103.92922 66.135156,101.63057 66.135156,98.80422 C66.135158,95.98789 68.396853,93.710473 71.166406,93.710473 Z" id="path1950" fill="url(#linearGradient-2)"></path>
17+
</g>
18+
</g>
19+
</svg>
20+
</template>

‎example/layouts/default.vue

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div>
3+
<nuxt/>
4+
</div>
5+
</template>
6+
7+
<style>
8+
html {
9+
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
10+
font-size: 16px;
11+
word-spacing: 1px;
12+
-ms-text-size-adjust: 100%;
13+
-webkit-text-size-adjust: 100%;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-font-smoothing: antialiased;
16+
box-sizing: border-box;
17+
}
18+
19+
*, *:before, *:after {
20+
box-sizing: border-box;
21+
margin: 0;
22+
}
23+
24+
.button--green {
25+
display: inline-block;
26+
border-radius: 4px;
27+
border: 1px solid #3b8070;
28+
color: #3b8070;
29+
text-decoration: none;
30+
padding: 10px 30px;
31+
}
32+
33+
.button--green:hover {
34+
color: #fff;
35+
background-color: #3b8070;
36+
}
37+
38+
.button--grey {
39+
display: inline-block;
40+
border-radius: 4px;
41+
border: 1px solid #35495e;
42+
color: #35495e;
43+
text-decoration: none;
44+
padding: 10px 30px;
45+
margin-left: 15px;
46+
}
47+
48+
.button--grey:hover {
49+
color: #fff;
50+
background-color: #35495e;
51+
}
52+
</style>

‎test/fixture/nuxt.config.js renamed to ‎example/nuxt.config.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
const { resolve } = require('path')
22

33
module.exports = {
4-
rootDir: resolve(__dirname, '../..'),
4+
rootDir: resolve(__dirname, '..'),
55
srcDir: __dirname,
66
dev: false,
7-
render: {
8-
resourceHints: false
9-
},
107
modules: ['@@']
118
}

‎example/package.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "nuxt-python",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "nuxt dev",
6+
"start": "nuxt start",
7+
"build": "nuxt build",
8+
"generate": "nuxt generate"
9+
},
10+
"dependencies": {
11+
"nuxt": "latest",
12+
"@nuxtjs/python": "latest"
13+
}
14+
}

‎example/pages/index.vue

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<section class="container">
3+
<div>
4+
<nuxt-logo/>
5+
<python-logo />
6+
<h1 class="title">
7+
{{ name }}
8+
</h1>
9+
<h2 class="subtitle">
10+
{{ description }}
11+
</h2>
12+
<div class="links">
13+
<a
14+
href="https://github.com/nuxt-community/python-module"
15+
target="_blank"
16+
class="button--green">Module Docs</a>
17+
</div>
18+
19+
<br>
20+
21+
<button @click="decrement">-</button>
22+
{{ $store.state.counter }}
23+
<button @click="increment">+</button>
24+
</div>
25+
</section>
26+
</template>
27+
28+
<script lang="py?compiler=pj">
29+
from ..components.PythonLogo import __default__ as PythonLogo
30+
from ..components.NuxtLogo import __default__ as NuxtLogo
31+
32+
class Component:
33+
def __init__(self):
34+
self['components'] = { 'NuxtLogo': NuxtLogo, 'PythonLogo': PythonLogo }
35+
36+
self['data'] = lambda: {
37+
'name': 'Nuxt.js + Python',
38+
'description': 'Build Nuxt.js applications using python!'
39+
}
40+
41+
self['methods'] = {
42+
'increment': self.increment,
43+
'decrement': self.decrement
44+
}
45+
46+
def increment(self):
47+
self['$store'].commit('increment')
48+
49+
def decrement(self):
50+
self['$store'].commit('decrement')
51+
52+
__default__= Component()
53+
</script>
54+
55+
<style>
56+
.container {
57+
min-height: 100vh;
58+
display: flex;
59+
justify-content: center;
60+
align-items: center;
61+
text-align: center;
62+
}
63+
64+
.title {
65+
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
66+
display: block;
67+
font-weight: 300;
68+
font-size: 100px;
69+
color: #35495e;
70+
letter-spacing: 1px;
71+
}
72+
73+
.subtitle {
74+
font-weight: 300;
75+
font-size: 42px;
76+
color: #526488;
77+
word-spacing: 5px;
78+
padding-bottom: 15px;
79+
}
80+
81+
.links {
82+
padding-top: 15px;
83+
}
84+
</style>

‎example/requirements.txt

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
-e git+https://gitlab.com/metapensiero/metapensiero.pj.git#egg=javascripthon

‎example/store/index.py

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
from vuex import Store
2+
3+
def increment(state):
4+
state.counter = state.counter + 1
5+
6+
def decrement(state):
7+
state.counter = state.counter - 1
8+
9+
def createStore():
10+
return Store(
11+
state= {
12+
'counter': 0
13+
},
14+
mutations= {
15+
'increment': increment,
16+
'decrement': decrement
17+
})
18+
19+
__default__ = createStore

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"access": "public"
1515
},
1616
"scripts": {
17-
"dev": "nuxt test/fixture",
17+
"dev": "nuxt example",
1818
"lint": "eslint lib test",
1919
"test": "npm run lint && jest",
2020
"release": "standard-version && git push --follow-tags && npm publish"

‎test/fixture/pages/index.vue

-13
This file was deleted.

0 commit comments

Comments
 (0)