On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • 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]]
    <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

    [ed. note: parthian last edited this post 7 months ago.]
    • 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).
      • 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

        • 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.
          • @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).
              A MODx Fanatic
            • 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.
              • @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.
                  A MODx Fanatic
                • 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).
                  [ed. note: lkfranklin last edited this post 3 months, 3 weeks ago.]
                    ■ email: lk@alienbuild.uk | ■ website: https://alienbuild.uk

                    The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.