WIP: Upgrade to Vue 3

.nvmrc

@@ -0,0 +1 @@
+19.2.0

src/App.vue

@@ -9,7 +9,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-	main {
+	#app {
 		height: 100%;
 	}
 	nav {

src/components/NavPanel.less

@@ -152,6 +152,7 @@ header div {
 			position: absolute;
 			height: @height-nav-link-border * 2;
 			border-left: solid 2px #000;
+			margin-left: -2px;
 			z-index: 1;
 		}
 

src/index.less

@@ -35,7 +35,7 @@ body {
 	margin: 0;
 }
 
-main {
+#app {
 	min-width: 300px;
 }
 
@@ -53,7 +53,7 @@ main {
 		font-size: unit( ( 14 / 16 ), em );
 	}
 
-	main,
+	#app,
 	body,
 	html {
 		box-sizing: content-box;

src/main.js

@@ -1,24 +1,20 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { createApp } from 'vue';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import App from './App.vue';
 import routes from './routes';
 
-Vue.use( VueRouter );
-
-const router = new VueRouter( {
+const router = createRouter( {
+	history: createWebHashHistory(),
 	routes
 } );
 
-Vue.directive( 'focus', {
-	// When the bound element is inserted into the DOM...
-	inserted: function ( el ) {
-		// Focus the element
-		el.focus();
-	}
-} );
-
-new Vue( {
-	el: '#app',
-	router,
-	render: ( h ) => h( App )
-} );
+const app = createApp( App )
+	.use( router )
+	.directive( 'focus', {
+		// When the bound element is inserted into the DOM...
+		inserted: function ( el ) {
+			// Focus the element
+			el.focus();
+		}
+	} )
+	.mount( '#app' );

src/pages/Add.vue

@@ -104,7 +104,7 @@ import Tabs from '../components/Tabs.vue';
 import Tab from '../components/Tab.vue';
 import Preview from '../components/Preview.vue';
 import nameMe from '../nameMe';
-import JsonViewer from 'vue-json-viewer';
+import JsonViewer from 'vue-json-pretty';
 import Page from './Page.vue';
 
 const assets = buildDefaultAssets();

src/pages/HomePage.vue

@@ -13,7 +13,7 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
+<style>
 .page--home {
 	display: none;
 }

src/routes.js

@@ -1,9 +1,9 @@
-import HomePage from './pages/HomePage';
-import Explore from './pages/Explore';
-import Skin from './pages/Skin';
-import NotFound from './pages/NotFound';
-import Add from './pages/Add';
-import BuildExtension from './pages/BuildExtension';
+import HomePage from './pages/HomePage.vue';
+import Explore from './pages/Explore.vue';
+import Skin from './pages/Skin.vue';
+import NotFound from './pages/NotFound.vue';
+import Add from './pages/Add.vue';
+import BuildExtension from './pages/BuildExtension.vue';
 
 export default [
 	{
@@ -27,7 +27,7 @@ export default [
 		component: Skin
 	},
 	{
-		path: '*',
+		path: '/:catchAll(.*)',
 		component: NotFound
 	}
 ];