A View on Vue Frontend Framework & MODx - My Forums

Re: A View on Vue Frontend Framework & MODx

lkfranklin — Mar 25, 2019, 04:46 PM

Looks great.. I've not really used vue much myself but I do use react daily. I've been trying to get it to play ball nicely with modx for a while now but alas it's just easier to use node/mongodb etc. Saying that I have created some nice custom manager pagers with react which works a million times faster than the modx manager pages (as expected).

Re: A View on Vue Frontend Framework & MODx

treigh — Mar 25, 2019, 03:51 PM

@parthian the lack of interest is probably due to the fact that most MODXers are on Slack these days, so I suspect most haven't seen the post. I'd bet that this will get some traction once the new forums are out.

Please keep sharing. Sooner or later, it'll be useful.

Re: A View on Vue Frontend Framework & MODx

parthian — Mar 24, 2019, 09:03 AM

Smashing @treigh. Glad you like it. Bit sad at the lack of interest so far. Maybe @Bobray or someone could rebuild their non-responsive websites using Vue/Vuetify. Under a day to get a swish looking responsive website, perhaps just a few hours. Perfect for the many non-designers who use MODx (which I suspect is the majority).

With the added possibilities of doing Vue FrontEnd Framework stuff to complement MODx. Methods, Computed, Watchers and the like.

Re: A View on Vue Frontend Framework & MODx

treigh — Mar 24, 2019, 06:19 AM

@parthian thanks for sharing! This will be very useful to many, especially given the rising popularity of frontend frameworks such as Vue (which I'm a fan of).

Re: A View on Vue Frontend Framework & MODx

vintproykt — Feb 05, 2019, 06:38 AM

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!

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.

Re: A View on Vue Frontend Framework & MODx

parthian — Jan 31, 2019, 11:50 AM

Hi Rodlon,

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

Re: A View on Vue Frontend Framework & MODx

vintproykt — Jan 31, 2019, 10:23 AM

One superior concern about MODX itself: it doesn't have out-of-the-box linking with bundlers or frontend frameworks (such as Vue, React), so you cannot get prerendered (SSR) components without pain.

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).

A View on Vue Frontend Framework & MODx

parthian — Dec 19, 2018, 07:09 PM

Evening,

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]]

[[$header]]
... stuff specific to this template ...
[[$footer]]
[[$javascript]]

Then head includes these lines - as per CDN Install section of Vuetify link.

Then header gets the layout of the page working with a menu, search and a responsive pull out menu - bit like Bootstrap would do.



    
      
     [[!Wayfinder? &startId=`0` &level=`1` &outerTpl=`VueNavOuterTpl` &outerClass=`` &rowTpl=`VueNavRowTpl` &rowClass=`ui-state-default` &hereClass=`active self ui-state-active` &firstClass=`` &lastClass =``]]   
        
        exit_to_app
        
        I've got phone numbers etc here
        
        
        [[!SimpleSearchForm? &landing=`38` &tpl=`ListVueSimpleSearchFormTpl`]]
      
    
    
      
      
        
      
      
        [[!Wayfinder? &startId=`0` &level=`1` &outerTpl=`NavOuterTpl` &outerClass=`` &rowTpl=`NavRowTpl` &rowClass=`` &hereClass=`` &firstClass=`` &lastClass =``]]
      
      
       [[!SimpleSearchForm? &landing=`38` &tpl=`VueSimpleSearchFormTpl`]]
      
     
    


  
  
    
  PARTHIAN SYSTEMS
Web Development and Mapping Services
  

.... 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


  exit_to_app
  [[+wf.linktext]][[+wf.wrapper]]

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.

You may need little in the way of Vue code. Note the sideNav: false. Look above for . 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