├── .github
    └── dependabot.yml
├── .gitignore
├── README.md
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    └── index.vue
├── plugins
    └── vue-data-ui.client.ts
├── public
    └── favicon.ico
├── server
    └── tsconfig.json
└── tsconfig.json


/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: "npm" # See documentation for possible values
 9 |     directory: "/" # Location of package manifests
10 |     schedule:
11 |       interval: "daily"
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | upgrade.cjs


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # npm
11 | npm install
12 | 
13 | # pnpm
14 | pnpm install
15 | 
16 | # yarn
17 | yarn install
18 | 
19 | # bun
20 | bun install
21 | ```
22 | 
23 | ## Development Server
24 | 
25 | Start the development server on `http://localhost:3000`:
26 | 
27 | ```bash
28 | # npm
29 | npm run dev
30 | 
31 | # pnpm
32 | pnpm run dev
33 | 
34 | # yarn
35 | yarn dev
36 | 
37 | # bun
38 | bun run dev
39 | ```
40 | 
41 | ## Production
42 | 
43 | Build the application for production:
44 | 
45 | ```bash
46 | # npm
47 | npm run build
48 | 
49 | # pnpm
50 | pnpm run build
51 | 
52 | # yarn
53 | yarn build
54 | 
55 | # bun
56 | bun run build
57 | ```
58 | 
59 | Locally preview production build:
60 | 
61 | ```bash
62 | # npm
63 | npm run preview
64 | 
65 | # pnpm
66 | pnpm run preview
67 | 
68 | # yarn
69 | yarn preview
70 | 
71 | # bun
72 | bun run preview
73 | ```
74 | 
75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
76 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |    <div>
3 |     <NuxtLayout>
4 |       <NuxtPage/>
5 |     </NuxtLayout>
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | 
 3 | export default defineNuxtConfig({
 4 |   // vue: {
 5 |   //   compilerOptions: {
 6 |   //     isCustomElement: (tag) => tag.startsWith("VueUi")
 7 |   //   }
 8 |   // }
 9 |   devtools: { enabled: true },
10 |   plugins: ["./plugins/vue-data-ui.client.ts"],
11 |   compatibilityDate: "2024-09-29",
12 | });
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare",
11 |     "upgrade": "node upgrade.cjs"
12 |   },
13 |   "devDependencies": {
14 |     "@nuxt/devtools": "^2.5.0",
15 |     "nuxt": "^3.17.5",
16 |     "vue": "^3.5.16",
17 |     "vue-router": "^4.5.1"
18 |   },
19 |   "dependencies": {
20 |     "vue-data-ui": "^2.9.6"
21 |   }
22 | }


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 
 3 | import { type VueUiXyConfig, type VueUiXyDatasetItem, VueUiXy } from "vue-data-ui";
 4 | 
 5 | const config = ref<VueUiXyConfig>({
 6 |     chart: {
 7 |         fontFamily: 'Arial'
 8 |     }
 9 | });
10 | 
11 | const dataset = ref<VueUiXyDatasetItem[]>([
12 |     {
13 |         name: "Series 1",
14 |         series: [-55, -34, -21, -13, -8, -5, -3, -2, -1, -1, 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55],
15 |         type: "bar"
16 |         ,
17 |         color: "rgb(95,139,238)",
18 |     },
19 |     {
20 |         name: "Series 2",
21 |         series: [55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0, -1, -1, -2, -3, -5, -8, -13, -21, -34, -55],
22 |         type:
23 |             "line"
24 |         ,
25 |         color: "rgb(66,211,146)",
26 |         useProgression: true,
27 |         dataLabels: false
28 |     },
29 |     {
30 |         name: "Series 3",
31 |         series: [64, 60, 52, 42, 30, 16, 0, -18, -38, -46, -50, -46, -38, -18, 0, 16, 30, 42, 52, 60, 64],
32 |         type:
33 |             "plot"
34 |         ,
35 |         color: "rgb(255,100,0)"
36 |     },
37 |     {
38 |         name: "Target",
39 |         series: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
40 |         type: "line",
41 |         color: "#404040",
42 |         dashed: true,
43 |         useTag: "start",
44 |         dataLabels: false,
45 |     },
46 | ]);
47 | 
48 | </script>
49 | 
50 | <template>
51 |     <div>
52 |     <ClientOnly>
53 |         <VueUiXy :dataset="dataset" :config="config" />
54 |     </ClientOnly>
55 |     </div>
56 | </template>
57 | 


--------------------------------------------------------------------------------
/plugins/vue-data-ui.client.ts:
--------------------------------------------------------------------------------
 1 | import { VueUiXy, VueDataUi } from "vue-data-ui";
 2 | import 'vue-data-ui/style.css'
 3 | 
 4 | export default defineNuxtPlugin((nuxtApp) => {
 5 |     nuxtApp.vueApp.component("VueUiXy", VueUiXy);
 6 | 
 7 | 
 8 |   // OR register the universal component if you plan to use it
 9 |   nuxtApp.vueApp.component("VueDataUi", VueDataUi);
10 | })
11 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphieros/vue-data-ui-nuxt/9231efcbee3f164284bcea7618fefa850e1058ca/public/favicon.ico


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json",
4 | }
5 | 


--------------------------------------------------------------------------------