Considering the number of views, this issue is quite exciting.
Here is my experience. I use RapydML and RapydScript to generate
Vue-components.
I wrote brute-force parser + made some hacks of RapydML-compiler so, as
exhaust I receive single js-file with embeded template as html-string.
If anyone is interested, I can describe in more detail. In gVim it looks
like this:
<https://lh3.googleusercontent.com/-SWHAIsxMvcE/WZOFDZqjxlI/AAAAAAAAAB4/rH3olx6FH8cirbUaZh9M54XMnqU9rQzSgCLcBGAs/s1600/v_hello.png>
On Tuesday, August 15, 2017 at 8:23:34 AM UTC+3, Limedrop wrote:
>
> @Carlos...I don't know if this is better, but it is different. Probably
> more suited to bigger apps. My basic assumption is that if you're going to
> use vue.js then, ultimately, it will be a lot easier if you stick to the
> proper vue.js way of doing things. In general this means letting vue.js do
> it's stuff with the frontend and leaving web2py with the data and backend.
>
> Specifically it means setting up your view files like this:
> https://vuejs.org/v2/guide/single-file-components.html
>
> And using this:
> https://github.com/vuejs-templates/webpack
>
> In development mode I have web2py running on one port and node running on
> another (node's hot-reloading seems like magic, and you can use the chrome
> VueDevtools plugin to debug). When I'm ready to commit I run "npm run
> build". The index file is then compiled to "/views/default/index.html",
> and the assets are compiled to "/static".
>
> In production I get web2py to serve the index file and then get vue.js to
> load whatever else it needs via ajax (axios).
>
> A basic outline of the key files are given below. Note that these are
> just snippets to show you how you might do it...the code is incomplete and
> it will NOT work out-of-the-box.
>
>
> ====\web2py\applications\app\controllers\default.py
>
> def index():
> """ Starts vue.js session
>
> The uuid is injected into the html <body> tag as
> the id. For example: <body id="14e4de39-dc9e-467f-a28e-9c78bd485bc1">
>
> vue.js then uses status_load() to retrieve the session details.
> """
> uuid = session_new()
> return dict(UUID=uuid)
>
> def status_load():
> uuid, error =
> IS_MATCH('[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}\Z')(request.vars['uuid'])
> if error:
> raise HTTP(403, "Not authorized")
> query = (db.vue_session.uuid==uuid)
> session =
> db(query).select(orderby=~db.vue_session.expiry_datetime).first()
> if not session:
> raise HTTP(403, "Not authorized")
> return response.json(session)
>
>
> ====\web2py\applications\app\views\index.html
> ## The COMPILED VUE.JS FILE GOES HERE!!!
>
>
> ====\vue\index.html
> <!DOCTYPE html>
> <html>
> <head>
> </head>
> <body id="{{=UUID}}">
> <div id="app"></div>
> <!-- built files will be auto injected -->
> </body>
> </html>
>
> ====\vue\src\App.vue
> <template>
> <div id="app" class="OuterWrapper">
> <div class="PageContainer">
> <router-view></router-view>
> </div>
> </div>
> </template>
>
> <script>
> export default {
> name: 'app',
> components: {
> },
> data () {
> return {
> }
> },
> computed: {
> },
> methods: {
> },
> mounted: function () {
> // The uuid is injected into the parentElement by web2py
> // The store will then use the uuid to get the session from web2py
> // and may redirect to the restore_point
> this.$store.dispatch('NEW_UUID', { uuid: this.$el.parentElement.id })
> }
> }
> </script>
>
> ====\vue\src\store\index.js
> import Vue from 'vue'
> import Vuex from 'vuex'
> import axios from 'axios'
> import router from '../router'
> Vue.use(Vuex)
> var axiosi = axios.create({
> baseURL: '/myapp/default/',
> timeout: 5000
> })
> const store = new Vuex.Store({
> state: {
> // put your session variables here
> },
> actions: {
> NEW_UUID: function ({ commit, dispatch, state }, { uuid }) {
> // At the start of each session web2py gives us a uuid
> // We then go back to web2py and retrieve the session state
> commit('SET_UUID', { uuid: uuid })
> var data = {}
> data.uuid = uuid
> axiosi.post('status_load', data).then((response) => {
> commit('UPDATE_STATUS', { newState: response.data })
> }, (err) => {
> console.log(err)
> router.push({ name: 'error', params: { errorMessage:
> err.response.data } })
> })
> }
>
>
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
