hawkeye64 · January 10, 2021 18:34
diff --git a/Vite Import Blobs.txt b/Vite Import Blobs.txt
 // The main use-case for the code below is to be able to test
 // components in isolation of various properties and functionality

 // -------------------------------------------------------
 // children.js
 // The code below (children.js) imports all files from 'src/pages' folder
 // It will exclude any index file (ie: index.js, Index.vue, etc)
 // Look below for usage...

 const modules = import.meta.glob('../pages/*.vue')

 function parsePath (path) {
  const parts = (/^(.*[\\/])?(.*?)(\.[^.]*?|)$/gi).exec(path)
  return {
    path: parts[ 0 ] || '',
    subpath: parts[ 1 ] || '',
    name: parts[ 2 ] || '',
    extension: parts[ 3 ] || ''
  }
 }

 function toKebabCase (str) {
  // make sure first character is lowercase
  str = str.charAt(0).toLowerCase() + str.slice(1)

  const result = str.replace(
    /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,
    match => '-' + match.toLowerCase()
  )
  return (str[ 0 ] === str[ 0 ].toUpperCase())
    ? result.substring(1)
    : result
 }

 const children = []

 for (const path in modules) {
  const parts = parsePath(path)
  if (parts.name.toLowerCase() !== 'index') {
    children.push({
      path: toKebabCase(parts.name),
      name: parts.name,
      component: modules[ path ]
    })
  }
 }

 export default children

 // -------------------------------------------------------
 // router.js
 // The code below shows how to use children.js to have dynamic routes

 import { createWebHistory, createRouter } from 'vue-router'
 const history = createWebHistory()

 import Home from '../pages/Index.vue'
 import children from './children.js'

 const routes = [
  {
    path: '/',
    component: () => import('../layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        name: 'home',
        component: Home
      }
    ].concat(children)
  }
 ]

 const router = createRouter({ history, routes })
 export default router

 // -------------------------------------------------------
 // Index.vue
 // The code below shows how to use children.js to be displayed
 // on a web page with a router-link

 <template>
  <div class="list">
    <div>Found: {{ filteredPages.length }}</div>
    <input
      v-model="filter"
      style="margin: 8px 0 8px 0;"
    >
    <ul>
      <li
        v-for="page in filteredPages"
        :key="page.path"
      >
        <router-link :to="'/' + page.path">
          {{ page.name }}
        </router-link>
      </li>
    </ul>
  </div>
 </template>

 <script>
 import children from '../router/children.js'

 export default {
  data () {
    return {
      filter: ''
    }
  },
  computed: {
    filteredPages () {
      if (this.filter) {
        const filtered = this.filter.toLowerCase()
        return children.filter(val =>
          val.name.toLowerCase().indexOf(filtered) > -1)
      }
      return children
    }
  },
  watch: {
    filter (val) {
      console.log(val)
    }
  }
 }
 </script>

 <style lang="sass" scoped>
 .list
  max-width: 100%

 .list ul
  display: table
  margin: 0 auto

 .list ul li
  text-align: left

 </style>
	// The main use-case for the code below is to be able to test
	// components in isolation of various properties and functionality

	// -------------------------------------------------------
	// children.js
	// The code below (children.js) imports all files from 'src/pages' folder
	// It will exclude any index file (ie: index.js, Index.vue, etc)
	// Look below for usage...

	const modules = import.meta.glob('../pages/*.vue')

	function parsePath (path) {
	const parts = (/^(.[\\/])?(.?)(\.[^.]*?\|)$/gi).exec(path)
	return {
	path: parts[ 0 ] \|\| '',
	subpath: parts[ 1 ] \|\| '',
	name: parts[ 2 ] \|\| '',
	extension: parts[ 3 ] \|\| ''
	}
	}

	function toKebabCase (str) {
	// make sure first character is lowercase
	str = str.charAt(0).toLowerCase() + str.slice(1)

	const result = str.replace(
	/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,
	match => '-' + match.toLowerCase()
	)
	return (str[ 0 ] === str[ 0 ].toUpperCase())
	? result.substring(1)
	: result
	}

	const children = []

	for (const path in modules) {
	const parts = parsePath(path)
	if (parts.name.toLowerCase() !== 'index') {
	children.push({
	path: toKebabCase(parts.name),
	name: parts.name,
	component: modules[ path ]
	})
	}
	}

	export default children

	// -------------------------------------------------------
	// router.js
	// The code below shows how to use children.js to have dynamic routes

	import { createWebHistory, createRouter } from 'vue-router'
	const history = createWebHistory()

	import Home from '../pages/Index.vue'
	import children from './children.js'

	const routes = [
	{
	path: '/',
	component: () => import('../layouts/MainLayout.vue'),
	children: [
	{
	path: '',
	name: 'home',
	component: Home
	}
	].concat(children)
	}
	]

	const router = createRouter({ history, routes })
	export default router

	// -------------------------------------------------------
	// Index.vue
	// The code below shows how to use children.js to be displayed
	// on a web page with a router-link

	<template>
	<div class="list">
	<div>Found: {{ filteredPages.length }}</div>
	<input
	v-model="filter"
	style="margin: 8px 0 8px 0;"
	>
	<ul>
	<li
	v-for="page in filteredPages"
	:key="page.path"
	>
	<router-link :to="'/' + page.path">
	{{ page.name }}
	</router-link>
	</li>
	</ul>
	</div>
	</template>

	<script>
	import children from '../router/children.js'

	export default {
	data () {
	return {
	filter: ''
	}
	},
	computed: {
	filteredPages () {
	if (this.filter) {
	const filtered = this.filter.toLowerCase()
	return children.filter(val =>
	val.name.toLowerCase().indexOf(filtered) > -1)
	}
	return children
	}
	},
	watch: {
	filter (val) {
	console.log(val)
	}
	}
	}
	</script>

	<style lang="sass" scoped>
	.list
	max-width: 100%

	.list ul
	display: table
	margin: 0 auto

	.list ul li
	text-align: left

	</style>