Upgrade to latest stable packages: Nuxt 3, Vue 3, Vuetify 3, and Three.js

.gitignore

@@ -71,6 +71,9 @@ typings/
 # Nuxt generate
 dist
 
+# Nuxt 3 build output
+.output
+
 # vuepress build output
 .vuepress/dist
 

app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

layouts/default.vue

@@ -1,36 +1,8 @@
 <template>
-  <v-app dark>
-    <!-- <v-navigation-drawer
-      v-model="drawer"
-      :mini-variant="miniVariant"
-      :clipped="clipped"
-      fixed
-      app
-    >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer> -->
-    <v-app-bar :clipped-left="clipped" fixed app>
-      <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer" /> -->
-      <v-toolbar-title v-text="title" />
+  <v-app>
+    <v-app-bar :clipped-left="clipped" app>
+      <v-toolbar-title>{{ title }}</v-toolbar-title>
       <v-spacer />
-      <!-- <v-btn icon @click.stop="rightDrawer = !rightDrawer">
-        <v-icon>mdi-menu</v-icon>
-      </v-btn> -->
       <v-btn
         icon
         href="https://github.com/granterickson/gravity"
@@ -41,50 +13,17 @@
     </v-app-bar>
     <v-main>
       <v-container>
-        <Nuxt />
+        <slot />
       </v-container>
     </v-main>
-    <!-- <v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
-      <v-list>
-        <v-list-item @click.native="right = !right">
-          <v-list-item-action>
-            <v-icon light> mdi-repeat </v-icon>
-          </v-list-item-action>
-          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer> -->
     <v-footer :absolute="!fixed" app>
       <span>&copy; {{ new Date().getFullYear() }}</span>
     </v-footer>
   </v-app>
 </template>
 
-<script>
-export default {
-  name: "DefaultLayout",
-  data() {
-    return {
-      clipped: false,
-      drawer: false,
-      fixed: false,
-      items: [
-        {
-          icon: "mdi-apps",
-          title: "Welcome",
-          to: "/",
-        },
-        {
-          icon: "mdi-chart-bubble",
-          title: "Inspire",
-          to: "/inspire",
-        },
-      ],
-      miniVariant: false,
-      right: true,
-      rightDrawer: false,
-      title: "Gravity Simulator",
-    };
-  },
-};
+<script setup lang="ts">
+const clipped = ref(false)
+const fixed = ref(false)
+const title = ref("Gravity Simulator")
 </script>

layouts/error.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app dark>
+  <v-app>
     <h1 v-if="error.statusCode === 404">
       {{ pageNotFound }}
     </h1>
@@ -12,30 +12,21 @@
   </v-app>
 </template>
 
-<script>
-export default {
-  name: 'EmptyLayout',
-  layout: 'empty',
-  props: {
-    error: {
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      pageNotFound: '404 Not Found',
-      otherError: 'An error occurred'
-    }
-  },
-  head () {
-    const title =
-      this.error.statusCode === 404 ? this.pageNotFound : this.otherError
-    return {
-      title
-    }
+<script setup lang="ts">
+interface ErrorProps {
+  error: {
+    statusCode: number
   }
 }
+
+const props = defineProps<ErrorProps>()
+
+const pageNotFound = ref('404 Not Found')
+const otherError = ref('An error occurred')
+
+useHead(() => ({
+  title: props.error.statusCode === 404 ? pageNotFound.value : otherError.value
+}))
 </script>
 
 <style scoped>

models/binary.ts

@@ -1,8 +1,8 @@
 import Body from "~/models/body";
 import Vector from "~/models/vector";
-import Setup from "~/models/setup";
+import { Setup } from "~/models/setup";
 
-export default class Binary implements Setup {
+export default class Binary extends Setup {
   title = "Binary";
 
   bodies(): Body[] {

models/chaos.ts

@@ -1,8 +1,8 @@
 import Body from "~/models/body";
 import Vector from "~/models/vector";
-import Setup from "~/models/setup";
+import { Setup } from "~/models/setup";
 
-export default class Chaos implements Setup {
+export default class Chaos extends Setup {
   title = "Chaos";
 
   bodies(): Body[] {

models/earthMoon.ts

@@ -1,8 +1,8 @@
 import Body from "~/models/body";
 import Vector from "~/models/vector";
-import Setup from "~/models/setup";
+import { Setup } from "~/models/setup";
 
-export default class EarthMoon implements Setup {
+export default class EarthMoon extends Setup {
   title = "Earth and Moon";
 
   bodies(): Body[] {

models/earthMoonAndOthers.ts

@@ -1,8 +1,8 @@
 import Body from "~/models/body";
 import Vector from "~/models/vector";
-import Setup from "~/models/setup";
+import { Setup } from "~/models/setup";
 
-export default class EarthMoonAndOthers implements Setup {
+export default class EarthMoonAndOthers extends Setup {
   title = "Earth, Moon and Others";
 
   bodies(): Body[] {

models/geometryMapping.ts

@@ -1,9 +1,9 @@
 import Vector from "~/models/vector";
 import * as THREE from "three";
 
-export default interface GeometryMapping {
+export type GeometryMapping = {
   lastPoint: Vector | null;
   sphere: THREE.Mesh;
   arrow: THREE.ArrowHelper;
   trails: THREE.Line<THREE.BufferGeometry, THREE.LineBasicMaterial>[];
-}
+};

models/setup.ts

@@ -1,6 +1,6 @@
 import Body from "~/models/body";
 
-export default interface Setup {
-  title: string;
-  bodies(): Body[];
+export abstract class Setup {
+  abstract title: string;
+  abstract bodies(): Body[];
 }