[How to] load all files in a directory as views

  • Hello

    This script will allow you to load all files in a directory as views. This allows you to avoid registering all views manually, rather you configure once then simply start adding pages!

    // router.js
    // returns all vue files in directory 'page'
    const pages = require.context('./components/page', true, /^\.\/.*\.vue$/)
      .filter(page => page.split('/').length >= 2)
      .map(page => page.slice(2).slice(0, -4))
    // Standard quasar load function. Only load view once needed
    function load (component) {
      // '@' is aliased to src/components
      return () => System.import(`@/${component}.vue`)
    // page loading function 
    function loadPage (page) {
      return {
        path: `/${page}`,
        component: load(`page/${page}`)
    // Add first route with layout
    let routes = [
        path: '/',
        component: load('Layout'),
        children: []
    // Add all other pages
    pages.forEach(page => {
    // Standard quasar default will redirect to '/404' route
    // Always leave this last one
    routes.push({ path: '*', redirect: '/404' }) // Not found

    You are all set! With this any .vue file you add in src/components/page/ will be added as a view.

    Of course this has limitations. Your files names must not have spaces. If anyone is interested I could show you how to extract a title for your page from the filename.

    Have a nice day!

  • Hello @benoitranque,
    The ‘@’ doesn’t compile for my Quasar 0.13 setup, I replaced with 'components’
    This is great!
    Thank you

  • Admin

    @bruce Thought I should drop this note: @ is a custom webpack alias in the v0.14 template which points to ‘components’.

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.