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 5 years, 4 months ago.]
