Jelle Hak jellehak

Usage

<Route path='/login'>
  Login Page
</Route>

<Route path='/user/:id'>
  <template #default="props">
 User Page

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

	<!DOCTYPE html>
	<html>

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

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

	<!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}}">

	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>
	<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'