<![CDATA[ A View on Vue Frontend Framework & MODx - MODX Community Forums]]> https://forums.modx.com/thread/?thread=104746 <![CDATA[Re: A View on Vue Frontend Framework & MODx]]> https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-564589 ]]> lkfranklin Mar 25, 2019, 04:46 PM https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-564589 <![CDATA[Re: A View on Vue Frontend Framework & MODx]]> https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-564587
Please keep sharing. Sooner or later, it'll be useful.]]>
treigh Mar 25, 2019, 03:51 PM https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-564587
<![CDATA[Re: A View on Vue Frontend Framework & MODx]]> https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-564567
With the added possibilities of doing Vue FrontEnd Framework stuff to complement MODx. Methods, Computed, Watchers and the like.]]>
parthian Mar 24, 2019, 09:03 AM https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-564567
<![CDATA[Re: A View on Vue Frontend Framework & MODx]]> https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-564566 treigh Mar 24, 2019, 06:19 AM https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-564566 <![CDATA[Re: A View on Vue Frontend Framework & MODx]]> https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-563960 Quote from: parthian at Jan 31, 2019, 11:50 AM

I'm not using the Single Page Application approach of course, which is what you are getting at. I'm using Vue Progressively.

That's neat, keep up the good job! smiley

Quote from: parthian at Jan 31, 2019, 11:50 AM

Not sure about Vuetify being "barely optimized for mobile devices". Maybe that's just my design or do you mean from general observation of Vuetify sites?

Exactly from general observation of Vuetify sites. I think this framework was made with fresh audience in mind, which don't bother to swap their browsing software and device to 2018's average needs: at least 4 GB RAM, dual core 2.4 GHz+. But I can be wrong, huh, don't take my observation seriously.]]>
vintproykt Feb 05, 2019, 06:38 AM https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-563960
<![CDATA[Re: A View on Vue Frontend Framework & MODx]]> https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-563857
Finally a comment. Thought this use of Vue and Vuetify with MODx would have sparked a lot more interest.

I've found no problems with SEO on google. Thought I would but I rebuilt my site in June and I get slightly more visitors than before ( it doesn't get many - so not a great test ) and the Bounce Rate has gone from a catastrophic 90% to an only moderately embarrassing 65%. This due to a better design and probably better content. With Vuetify taking most of the credit.

I'm not using the Single Page Application approach of course, which is what you are getting at. I'm using Vue Progressively. And google appears to have no problem. A View Source shows all the content as normal, not just a call to javascript as per a SPA.

That said, I've just tested a fairly specific term for my site (not including my domain) for which I'm in SERPS position 1 on google.com. But on DuckDuckGo and Bing I'm nowhere to be found. Adding my domain and I'm found no trouble so the site is indexed on those two search engines, just not very well. I've no idea if this is Vue related.


Not sure about Vuetify being "barely optimized for mobile devices". Maybe that's just my design or do you mean from general observation of Vuetify sites? I'm sure the developers would welcome fresh input. It's fairly new compared to Bootstrap etc. Maybe there are bugs/issues on some smartphones.


Wish someone else would have a go and report back.


Stuart

]]>
parthian Jan 31, 2019, 11:50 AM https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-563857
<![CDATA[Re: A View on Vue Frontend Framework & MODx]]> https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-563856
Actually there is only ready solution for React I find interesting: https://github.com/indieDevelopments/modx-react

By the way, the work you made is just great for inner clients (corporate portal, etc. what doesn't need SEO)! It's escpecially when you use Vuetify instead of, let's say, Bootstrap-Vue, Buefy and Material Design alternatives for Vue, because Vuetify is barely optimized for mobile devices and font size is small by default (I guess everything there is desgined for low resolution interfaces like modals).]]>
vintproykt Jan 31, 2019, 10:23 AM https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-563856
<![CDATA[A View on Vue Frontend Framework & MODx]]> https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-563326
I recently converted my business website to use Vue https://vuejs.org/v2/guide/index.html and Vuetify - fairly new to both. This to make frontend work easier and to improve my limited design skills treating Vuetify as a replacement for Bootstrap/Foundation etc. The Full Fat approach to Vue Development: using Single Page Applications (SPA); components; Webpack; Vue-CLI; Vuex etc creates an HTML file which simply lists the javascript used to build the site live in the visitors browser. I've had a go at that too for an ecommerce site with loads of interactions, tables etc but suspect this approach won't ever be applicable to MODx.

In that sense, I'm using the "Progressive" feature of Vue. The ability to include some javascript to any HTML to make it a Vue application. This link sums up all you need to do to get going - https://vuetifyjs.com/en/getting-started/quick-start#cdn-install. For Angular and React you'd need to spend about a week learning all sorts of epic stuff. And I don't believe either is Progressive, so could perhaps never be of use with MODx.

An overview of part of what I did to give a flavour.
Building this page, not a designer so no sniggering - https://www.parthiansystems.co.uk/

I build my MODx Templates using Chunks for $head, maybe some HTML then a $header, then content stuff, and a $javascript as so.

[[$head]]
<body>
[[$header]]
... stuff specific to this template ...
[[$footer]]
[[$javascript]]
</body>
</html>


Then head includes these lines - as per CDN Install section of Vuetify link.
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/assets/css/yourcustomcsshere.css" />
  <!-- development version, includes helpful console warnings 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <!-- production later when you've attained Elite status <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->


Then header gets the layout of the page working with a menu, search and a responsive pull out menu - bit like Bootstrap would do.
<div id="app">
<v-app v-cloak id="parthian">
    <v-navigation-drawer temporary app v-model="sideNav">
      <v-list>
     [[!Wayfinder? &startId=`0` &level=`1` &outerTpl=`VueNavOuterTpl` &outerClass=`` &rowTpl=`VueNavRowTpl` &rowClass=`ui-state-default` &hereClass=`active self ui-state-active` &firstClass=`` &lastClass =``]]   
        <v-list-tile>
        <v-list-tile-action><v-icon>exit_to_app</v-icon></v-list-tile-action>
        <v-list-tile-content>
        I've got phone numbers etc here
        </v-list-tile-content>
        </v-list-tile>
        [[!SimpleSearchForm? &landing=`38` &tpl=`ListVueSimpleSearchFormTpl`]]
      </v-list>
    </v-navigation-drawer>
    <v-toolbar light class="">
      <v-layout row wrap pt-2 pb-2>
      <v-flex xs1>
        <v-toolbar-side-icon @click.stop="sideNav = !sideNav" class="hidden-sm-and-up"></v-toolbar-side-icon>
      </v-flex>
      <v-flex xs5 sm8 mt-3 offset-sm1>
        [[!Wayfinder? &startId=`0` &level=`1` &outerTpl=`NavOuterTpl` &outerClass=`` &rowTpl=`NavRowTpl` &rowClass=`` &hereClass=`` &firstClass=`` &lastClass =``]]
      </v-flex>
      <v-flex xs6 sm2>
       [[!SimpleSearchForm? &landing=`38` &tpl=`VueSimpleSearchFormTpl`]]
      </v-flex>
     </v-layout>
    </v-toolbar>

<v-content class="mapbackground" >
  <v-container fluid>
  <v-layout row wrap>
  <v-flex>  
  <span class="headerh1 text-xs-center">PARTHIAN SYSTEMS<br>Web Development and Mapping Services</span>
  </v-flex>
<v-container grid-list-md class="mt-1">
.... now the meat of the page using mostly MODx stuff.


Note, div id="app" this is so the javascript below knows which bit of the code is Vue. and v-app is for Vuetify. v-cloak is handy. Turns off display of the DOM until everything is ready (with some CSS [v-cloak] { display: none; } ). Stops the raw HTML appearing then getting Vue'd up later making a nasty 'flash'.

You can see things like v-container fluid , v-layout row wrap, and v-flex. These help with the Grid system built into Vuetify.

The v-navigation-drawer is to make one of those nice popout menus in mobile viewports.

And some MODx - Wayfinder for the menu. The outerTpl is just [[wf.wrapper]] as normal but the rowTpl chunk is

<v-list-tile [[+wf.classes]]>
  <v-list-tile-action><v-icon>exit_to_app</v-icon></v-list-tile-action>
  <v-list-tile-content><v-btn flat href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></v-btn>[[+wf.wrapper]]</v-list-tile-content>
</v-list-tile>


All a bit intimidating looking but Bootstrap is much the same. Lots of stuff to build a list of menu items. Note the v-icon - this uses Google Material+Icons - https://material.io/tools/icons/?style=baseline. You'll recognise the Wayfinder stuff.


Finally, the $javascript chunk. I have my vue.js included in the $head rather than the Vuetify approach at the bottom. Not sure why I did that.

  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script>
   var app = new Vue({
     el: '#app',
     data: {
       message: 'Hello Vue!',
       sideNav: false
    },
   watchers, methods, computed etc can go in here if needed. All Vue stuff.
   })
  </script>


You may need little in the way of Vue code. Note the sideNav: false. Look above for <v-navigation-drawer temporary app v-model="sideNav">. This is part of the two-way data bindings for Form interactions. More here - https://vuejs.org/v2/guide/forms.html

Some useful links on Vuetify to get you all a fluster.
https://vuetifyjs.com/en/layout/grid
https://vuetifyjs.com/en/components/date-pickers
https://vuetifyjs.com/en/components/lists
I've used tables a bit. Awesome.
https://vuetifyjs.com/en/components/data-tables
Looking a bit like the Resources tree in the manager.
https://vuetifyjs.com/en/components/treeview#examples


Should give you a head start. Is Vue/Vuetify right for your project? Not sure, I did it as an exercise as I use Vue for other things. Works well I think, and gives nice features e.g. when you click on the Search box top right on my site or hover over the main content with a popup thing appearing. And the v-chips (red / blue button things). So mainly I added Vue for Vuetify UI components and the grid.

Could MODX 4.0 manager be built using Vue? That's one for minds immeasurably superior to mine.

Cheers

Stuart

]]>
parthian Dec 19, 2018, 07:09 PM https://forums.modx.com/thread/104746/a-view-on-vue-frontend-framework-modx#dis-post-563326