Skip to content

Instantly share code, notes, and snippets.

@davestewart davestewart/helpers.js
Last active Nov 26, 2019

Embed
What would you like to do?
Vue "route helpers" example
/**
* Helper function to reduce boilerplate in route creation
*
* @param {string} path The route's path
* @param {object} page A page component definition
* @param {Function} page A function that returns a page import
* @param {string} page A string path to a file in the view/pages folder
* @param {object} attrs Any additional attributes
*/
export function route (path, page, attrs = {}) {
return { path, component: load(page), ...attrs }
}
export function alias (path, alias, page) {
return { path, alias, component: load(page) }
}
export function redirect (path, redirect) {
return { path, redirect }
}
export function hook (path, beforeEnter) {
return { path, beforeEnter }
}
export function load (page) {
if (typeof page === 'string') {
return require('../views/pages/' + page).default
}
return page
}
import { hook, route } from './helpers'
import { signIn, signOut } from './auth'
export default [
// -------------------------------------------------------------------------------------------------------------------
// MAIN
// -------------------------------------------------------------------------------------------------------------------
// auth
hook('/sign-in', signIn),
hook('/sign-out', signOut),
// main
route('/', 'main/Home.vue'),
route('/about', 'main/About.vue'),
// -------------------------------------------------------------------------------------------------------------------
// GLOBAL
// -------------------------------------------------------------------------------------------------------------------
// apps
route('/apps', 'apps/Index.vue'),
route('/apps/create', 'apps/Create.vue'),
route('/apps/:appId', 'apps/app/Index.vue', {
children: [
route('', 'apps/app/Home.vue'),
route('edit', 'apps/app/Edit.vue'),
]
}),
// sites
route('/sites', 'sites/Index.vue'),
// -------------------------------------------------------------------------------------------------------------------
// LOCAL
// -------------------------------------------------------------------------------------------------------------------
// site
route('/site/:siteId', 'sites/site/Index.vue', {
children: [
route('', 'sites/site/Home.vue'),
route('companies', 'sites/site/Companies.vue'),
route('admin', 'sites/site/Admin.vue'),
]
}),
// site > company
route('/company/:siteId/:companyId', 'sites/company/Index.vue', {
children: [
route('', 'sites/company/Home.vue'),
route('apps', 'sites/company/Apps.vue'),
route('admin', 'sites/company/Admin.vue'),
]
}),
// site > company > app
route('/app/:siteId/:companyId/:appId', 'sites/app/Index.vue', {
children: [
route('', 'sites/app/Home.vue'),
route('admin', 'sites/app/Admin.vue'),
route('logs', 'sites/app/Logs.vue'),
]
}),
// 404
route('*', 'error/404.vue'),
]
/**
* Smart loader that loads app, areas or module pages via:
*
* - '<path>'
* - '<module>@<path>'
* - '<borrower|lender>@<path>'
*
* This maps to the actual folder:
*
* - route('foo/edit', 'borrower@foo/Edit')
* - areas/borrower/pages/foo/Edit.vue
*
* @param {string|object|function} page
*/
export function load (page) {
if (typeof page === 'string') {
if (page.includes('@')) {
const [module, path] = page.split('@')
// for some reason, webpack seems to be picky about the code used to
// build paths. Not sure why. Perhaps it's a static analysis thing?
// Anyway, this nested ifs structure works... so leave it!
if (/^(borrower|lender|guest)$/.test(module)) {
return require(`../../areas/${module}/pages/${path}`).default
}
return require(`../../modules/${module}/pages/${path}`).default
}
return require('../views/pages/' + page).default
}
return page
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.