Merge pull request #353 from telerik/add-nuxt3

Add nuxt3

Author: zdravkov

.DS_Store

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

kendo-nuxt3/.DS_Store

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

kendo-nuxt3/.gitignore

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <AppBar>
+        <AppBarSection>
+          <kbutton :icon="'menu'" :fill-mode="'flat'" @click="handleClick" />
+        </AppBarSection>
+        <AppBarSpacer :width="4" />
+        <AppBarSection>
+          <NuxtLink to="/">Home</NuxtLink>
+        </AppBarSection>
+    </AppBar>
+    <Drawer
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :items="items"
+      @select="onSelect"
+    >
+      <DrawerContent>
+        <NuxtPage />
+      </DrawerContent>
+    </Drawer>
+  </div>
+
+</template>
+<script>
+import { Drawer, DrawerContent, AppBar, AppBarSection, AppBarSpacer } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+  name: "App",
+  components: { Drawer, DrawerContent, "kbutton": Button,
+  AppBar, AppBarSection, AppBarSpacer },
+  mounted() {
+    this.$router.push(this.items[0].data);
+  },
+  computed: {
+    items() {
+      const splitName = this.$route.name.split('-')
+      const currentRootName = splitName[0];
+      const rootroutes = this.$route.name === 'index' 
+                  ? this.$router.options.routes
+                        .filter(r=>r.path.split('/').length === 2)
+                        .map(t=>{
+                          return {
+                          text: t.name,
+                          selected: t.name === this.$route.name,
+                          data: {
+                            path: t.path
+                          }
+                        }})
+                  : [
+                      {
+                        text: 'Go Back',
+                        data: {
+                          path: '/'
+                        }
+                      },
+                      ...this.$router.options.routes
+                          .filter(r=> {
+                            return r.path.startsWith('/' + currentRootName) && r.path.endsWith('main')
+                          })
+                          .map(t=>{
+                            return {
+                            text: t.name.split('-main')[0],
+                            selected: t.name === this.$route.name,
+                            data: {
+                              path: t.path
+                            }
+                          }})
+                    ];
+      return rootroutes;
+    }
+  },
+  data() {
+  
+    return {
+      expanded: true,
+      position: "start",
+      mode: "push",
+    };
+  },
+  methods: {
+    onSelect(e) {
+      this.$router.push(this.items[e.itemIndex].data);
+    },
+    handleClick() {
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>

kendo-nuxt3/README.md

@@ -0,0 +1,30 @@
+<template>
+    <KButton @click="handleClick"> {{visible ? ' Hide Navigation' : 'Show Navigation' }}</KButton>
+   
+</template>
+
+<script lang="ts">
+import { computed } from 'vue';
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+components: {
+    KButton: Button
+},
+provide(this: any) {
+    return {
+        visible: computed(() => this.visible)
+    }
+},
+data() {
+    return {
+        visible: true
+    };
+},
+methods: {
+    handleClick(this: any) {
+        this.visible = !this.visible;
+    }
+}
+}
+</script>

kendo-nuxt3/app.vue

@@ -0,0 +1,7 @@
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+    css: [
+        '@progress/kendo-theme-default/dist/all.css',
+    ],
+    pages:true
+})