Vue (vuejs) examples? (ANY VUE EXPERT WILLING TO HELP?) #287
Comments
|
Most examples of the use of frameworks are contributed by users. KR |
|
I'm trying but I'm running into an issue - I've created an object by instantiating a class and passing this object to Vue, I'm getting an infinite look (recursion limit) I think it's looping over How to aproach this issue? Thanks! |
|
Could you show me some code in order to be able to help you? |
|
Sure! I'm writing a module for Nuxtjs which will allow to write Nuxt apps with Python / Transcrypt. Please check out: It is a single file component with Transcrypt syntax. Since Vue is rather functional, Python may not be the best match for producing the required objects (docs at https://vuejs.org/v2/guide/ ) |
|
Here's also the relevant Nuxt docs. Nuxt is a framework which uses the filesystem as routes to serve .vue files, single file components. <script lang="py">
from ..components.PythonLogo import __default__ as PythonLogo
from ..components.NuxtLogo import __default__ as NuxtLogo
class Component:
def __init__(self):
self['components'] = { 'NuxtLogo': NuxtLogo, 'PythonLogo': PythonLogo }
self['data'] = lambda: {
'name': 'Nuxt.js + Python',
'description': 'Build Nuxt.js applications using Python!'
}
self['methods'] = {
'increment': self.increment,
'decrement': self.decrement
}
def increment(self):
self['$store'].commit('increment')
def decrement(self):
self['$store'].commit('decrement')
__default__= Component()
</script>While with Transcrypt I'm using this and getting errors: <script lang="py?compiler=transcrypt">
__pragma__('jsiter')
PythonLogo = require ('@/components/PythonLogo')['default']
NuxtLogo = require ('@/components/NuxtLogo')['default']
def increment(self):
console.log(self)
this['$store'].commit('increment')
def decrement(self):
console.log(this)
this['$store'].commit('decrement')
c = {} # __: jsiter
c['components'] = { 'NuxtLogo': NuxtLogo, 'PythonLogo': PythonLogo }
c['data'] = lambda: {
'name': 'Nuxt.js + Python',
'description': 'Build Nuxt.js applications using Python!'
}
c['methods'] = {
'increment': increment,
'decrement': decrement
}
module.exports = c
</script>Getting: |
|
I must say I've currently no idea what's going on and why. But the code in the Javascripthon example looks a lot more Pythonic than the Transcrypt code. Why is that? Can't you use a class there as well? And why are the two jsiter pragma's necessary. They are meant for very uncommon cases. The error report indeeds signals infinite recursion. But what is vue-meta.js? Is it generated from the Transcrypt code? Do you perhaps need components, as described in: Sorry for all these utterly uninformed questions, but I have no concept of how this is supposed to work, so I try to explore the playfield... |
JdeH
changed the title
|
Jaques, <script>
import PythonLogo from '~/components/PythonLogo'
import NuxtLogo from '~/components/NuxtLogo'
export default {
components : { 'NuxtLogo': NuxtLogo, 'PythonLogo': PythonLogo },
data: function () {
return {
'name': 'Nuxt.js + Python',
'description': 'Build Nuxt.js applications using Python!'
}
},
methods: {
increment: function() {
this['$store'].commit('increment')
},
decrement: function() {
this['$store'].commit('decrement')
}
}
}
</script> |
|
It's necessary to launch the example with |
|
I 've tried to install the example but unfortunately the installation fails on my Windows 10 machine. But already one hint: |
|
Tranlated from your JavaScript example a sugggestion would be (currently no idea if it really works): To make the whole thing lean when multiple components are used on a page, probably you need to use Transcrypt units. This avoids duplicating the runtime and other common code. As mentioned earlier, units (components) are described at: Sorry my help isn't more concrete, but I currently lack the Vue knowledge for that. |
|
@icarito I had previously used Vue, Browserify with Transcrypt, it worked, but I didn't use webpack, so it seems you just need a plain old JS object, Python can implement functions, you don't need classes, Vue is rather functional. |
|
Dear All I am not a vue expert but have been hacking my way through this problem last few days. `#This is the python file from .template import comp_template class my_comp(): Vue.component('vrs-search', my_comp.comp_defs()) `import argparse if name == 'main': ` |
|
I'm working on the same kind of thing. But currently, I reach to use components like that : <template>
<div>
{{name}} {{cpt}}
<button @click="inc()">++</button>
</div>
</template>
<script lang="python">
class Component:
def __init__(self, name): # <- name is a props
self.cpt=0
def inc(self):
self.cpt+=1
</script>
<style scoped>
:scope {background:#EEE}
</style>Currently, I've got the lifecyles, watchers, computed, props features ... |
|
BTW, I've just released ... my vision of "python component" in a vue/sfc file, thru vbuild (python lib to render "*.vue" -> html/script/style, without a nodejs stack). All is here : https://github.com/manatlan/vbuild It's pretty usable (I use it in production) |
|
@manatlan |
|
I've made tests with the 3 main currents transpilers (transcrypt, javascrypthon and pscript). I want to keep vbuild py2/py3 compliant (I use it mainly on appengine/py27 (but will go with py37 soon)) btw, python components doesn't need all py std lib ... and pscript seems to do the minimal which fit the needs. (and will support decorators soon) |
|
Hi @manatlan thanks for pointing me to wuy and vbuild, and PScript, hadn't seen it! |
|
your welcome... btw, i've just released a vbuild demo, so you can EASILY test python/pscript rendering of python components, in a vuejs context ! (the demo is, himself, a vuejs python component) |
|
related: |
|
Closing as answered |
Do you plan to provide some Vue examples?
The text was updated successfully, but these errors were encountered: