Minor updates to fix tests

nuxt/README.md

@@ -21,7 +21,7 @@ Table of contents:
 
 ## Prerequisites
 
-- [Node.js 18.0 or later](https://nodejs.org/en/)
+- [Node.js 20.0 or later](https://nodejs.org/en/)
 
 ## Installation 
 

nuxt/app.css

@@ -31,7 +31,7 @@ body {
   }
 
   .chart-container {
-    margin-top: 70px;
+    margin-top: 50px;
   }
 
   .first-description-block {
@@ -78,6 +78,7 @@ body {
     margin: 5px 5px 5px 0;
     position: relative;
     width: auto;
+    appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     -webkit-box-sizing: border-box;

nuxt/components/SideMenu.vue

@@ -5,7 +5,7 @@
         <router-link to="/pivot-table-demo">PIVOT TABLE DEMO</router-link>
       </li>
       <li class="tab-button">
-        <router-link to="/composition-api-demo">PIVOT TABLE DEMO (Composition API)</router-link>
+        <router-link to="/options-api-demo">PIVOT TABLE DEMO (Options API)</router-link>
       </li>
     </ol>
     <div class="sub-title">API and Events</div>
@@ -43,8 +43,5 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "SideMenu",
-};
+<script setup>
 </script>

nuxt/components/ToggleButton.vue

@@ -1,36 +1,35 @@
 <template>
-  <div class="toggle-button noselect" :id="id">
+  <div
+    class="toggle-button noselect"
+    :id="id"
+  >
     <input
       class="button-checkbox"
       :id="labelOn"
       type="checkbox"
       v-model="checked"
-      v-on:click="onClick"
+      v-on:click="$emit('clicked', checked)"
     />
-    <label :for="labelOn" class="button-checkbox-label">
+    <label
+      :for="labelOn"
+      class="button-checkbox-label"
+    >
       <span class="on">{{ checked ? labelOn : labelOff }}</span>
     </label>
   </div>
 </template>
 
-<script>
-export default {
-  name: "ToggleButton",
-  inheritAttrs: false,
-  props: {
+<script setup>
+  import { ref } from "vue";
+
+  defineProps({
     labelOn: String,
     labelOff: String,
     id: String,
-  },
-  data: function () {
-    return {
-      checked: true,
-    };
-  },
-  methods: {
-    onClick: function () {
-      this.$emit("clicked", this.checked);
-    },
-  },
-};
+  });
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const checked = ref(true);
 </script>

nuxt/components/ToggleSwitch.vue

@@ -1,36 +1,35 @@
 <template>
-  <div class="toggle-switch noselect" :id="id">
+  <div
+    class="toggle-switch noselect"
+    :id="id"
+  >
     <input
       class="button-checkbox"
       :id="labelOn"
       type="checkbox"
       v-model="checked"
-      v-on:click="onClick"
+      v-on:click="$emit('clicked', checked)"
     />
-    <label :for="labelOn" class="button-checkbox-label">
+    <label
+      :for="labelOn"
+      class="button-checkbox-label"
+    >
       <span class="on">{{ checked ? labelOn : labelOff }}</span>
     </label>
   </div>
 </template>
 
-<script>
-export default {
-  name: "ToggleSwitch",
-  inheritAttrs: false,
-  props: {
+<script setup>
+  import { ref } from "vue";
+
+  defineProps({
     labelOn: String,
     labelOff: String,
     id: String,
-  },
-  data: function () {
-    return {
-      checked: true,
-    };
-  },
-  methods: {
-    onClick: function () {
-      this.$emit("clicked", this.checked);
-    },
-  },
-};
+  });
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const checked = ref(true);
 </script>

nuxt/components/TopMenu.vue

@@ -4,13 +4,13 @@
       <a href="https://www.flexmonster.com/?r=rm_vue" target="blank" class="logo">
         <img
           src="https://www.flexmonster.com/base/assets/img/svg/logo.svg"
-          alt
+          alt=""
         />
       </a>
       <ul class="mainnav">
         <li>
-          <a href="https://www.flexmonster.com/doc/integration-with-vue-3/?r=rm_vue" target="blank">
-          Integration with Vue 3</a>
+          <a href="https://www.flexmonster.com/doc/integration-with-nuxt/?r=rm_vue" target="blank">
+          Integration with Nuxt</a>
         </li>
         <li>
           <a href="https://www.flexmonster.com/doc/?r=rm_vue" target="blank">Docs</a>
@@ -30,8 +30,5 @@
   </header>
 </template>
 
-<script>
-export default {
-  name: "TopMenu",
-};
+<script setup>
 </script>