Jelle Hak jellehak

Automatic routes for Vue

One thing I quite like from the Nuxt framework is the automatic routing capabilities. After a quick look on the web I came across https://github.com/ktsn/vue-auto-routing and a great tutorial from Michal https://codeburst.io/automatic-routing-in-vue-js-applications-1403ba425bfa. I tried to implement this plugin but it felt it could be done even more simple with the use of require.context.

It turns this folder structure:

pages
|- dashboard
|- photos
|- users

	<?php

	// Script to handle github webhook
	// https://developer.github.com/webhooks/

	// =========================
	// CONFIG
	// =========================
	// Set in Github
	$secret = ""; // (optional but recommended) this makes this endpoint only availible to github e.g. veryverysecret

	// Globally register all base components for convenience, because they
	// will be used very frequently. Components are registered using the filename

	import Vue from 'vue';

	// https://webpack.js.org/guides/dependency-management/#require-context
	const requireComponent = require.context(
	'./', // Look for files in the current directory
	true, // include subdirectories
	// Only include "_base-" prefixed .vue files

	<!DOCTYPE html>
	<html>
	<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
	<body>

	<div id="app"></div>

	<script type="text/babel">

	<!DOCTYPE html>
	<html>
	<body>

	<div id="app">
	<h1>Hello World!</h1>
	</div>

	<script type="module">
	import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'

	export const get = (name = '') => {
	const storage = localStorage.getItem(name)
	const resp = JSON.parse(storage)
	return Array.isArray(resp) ? resp : []
	}

	export const save = (name = '', obj) => {
	localStorage.setItem(name, JSON.stringify(obj))
	}

	<!DOCTYPE html>
	<html>

	<head>
	<title>Docs</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/swagger-ui.css">
	</head>

	<body>
	<div id="ui-wrapper-new" data-spec="{{spec}}">

	<!DOCTYPE html>
	<html>

	<head>
	<title>Javascript tool to convert BSON binary file into JSON</title>

	<style>
	html, body {
	/* margin: 0; */
	/* padding: 0; */