@websanova/vue-utils v0.6.4
vue-utils
A simple utils library for Vue.js
The idea behind this library is just to provide the ability to auto include some utils for common tasks in vue like fading between pages or scrolling to top between routes.
We want to tuck away all this functionality and just have it ready to go in our apps.
Install
With default options just set an array.
Vue.use(require('@websanova/vue-utils/src/pageTop.js'));
Vue.use(require('@websanova/vue-utils/src/pageMeta.js'));
Vue.use(require('@websanova/vue-utils/src/pageFade.js'));
Utils
pageTop
One thing with Vue.js is that when components load in and out between routes, the scroll bar doesn't change position. We most likely want to scroll to the top of the page for new (main) routes.
Once set it will automatically scroll to the top of the page based on a route group which can be set in your route mappings.
The default value in the routes file will be called pageTop
for setting groups.
...
'/tabs': {
component: require('./components/pages/tabs/Index.vue'),
meta: {
top: 'tabs-test',
},
children: [{
path: '/',
component: require('./components/pages/tabs/One.vue')
}, {
path: '/two',
component: require('./components/pages/tabs/Two.vue')
}, {
path: '/three',
component: require('./components/pages/tabs/Three.vue')
}]
}
...
Any routes in the same group
will NOT scroll to top. Only routes between DIFFERENT groups will scroll to the top (or no group set at all).
pageMeta
Set meta properties defined in the route.
It will try to find meta tags by name
or property
and set it's content
.
NOTE: This is just a simply utility for setting static meta content. If setting some kind of open graph meta it's best to use some kind of global store.
It's more useful for setting visible things like the title
.
...
'/login': {
meta: {
meta: {
title: 'Login',
meta: [
{attribute: 'description', content: 'This is the login page description.'}
]
}
},
component: require('./components/pages/Login.vue'),
}
...
pageFade
A programmatic fade transition for pages. This was originally designed with the idea of tabs within a page in mind. So that the tabs are separate routes/components but behave more like they are on the same page.
NOTE: There is one caveat here, once you set a transition for a certain route
level you will need to then set a transition for ALL routes at that level.
Setting a transition is just like setting any transition in Vue.
<div transition="page-fade-both"></div>
There are four available fade transitions. Just make sure they are set at the component templates root element.
<div transition="page-fade-both"></div>
<div transition="page-fade-in"></div>
<div transition="page-fade-out"></div>
<div transition="page-fade-none"></div>