├── .dockerignore
├── .github
├── dependabot.yml
└── workflows
│ └── main.yml
├── .gitignore
├── .npmrc
├── CHANGELOG.md
├── CHANGES.md
├── Dockerfile
├── LICENSE.md
├── README.md
├── eslint.config.js
├── index.html
├── netlify.toml
├── nginx.conf
├── package.json
├── pnpm-lock.yaml
├── public
├── assets
│ └── fonts
│ │ ├── dmmono-612bc94f.woff2
│ │ ├── dmmono-cbe07c46.woff2
│ │ ├── inter-2a19f7d8.woff2
│ │ ├── inter-5fac53e3.woff2
│ │ ├── inter-61305330.woff2
│ │ ├── inter-88663f47.woff2
│ │ ├── inter-890a0cca.woff2
│ │ ├── inter-9b37f5d7.woff2
│ │ ├── inter-bf9480af.woff2
│ │ ├── robotocondensed-0dbc43c7.woff2
│ │ ├── robotocondensed-3bbb4ae8.woff2
│ │ ├── robotocondensed-4daf5cdd.woff2
│ │ ├── robotocondensed-5553a467.woff2
│ │ ├── robotocondensed-abe48f47.woff2
│ │ ├── robotocondensed-ca4bb2ff.woff2
│ │ └── robotocondensed-ea86c23d.woff2
├── data
│ ├── customers-medium.json
│ └── products.json
├── favicon.ico
├── nuxt-logo.svg
├── primevue-logo.webp
└── vue-logo.png
├── src
├── App.scss
├── App.vue
├── assets
│ ├── data
│ │ ├── customers-medium.json
│ │ └── products.json
│ └── sass
│ │ ├── form.scss
│ │ ├── main.scss
│ │ ├── markdown.scss
│ │ └── sidebar.scss
├── auto-import.d.ts
├── components.d.ts
├── components
│ ├── AdvertiseBox.vue
│ ├── app
│ │ ├── AppColorMode.vue
│ │ ├── AppFooter.vue
│ │ ├── AppProfile.vue
│ │ ├── AppSidebar.vue
│ │ └── AppTopbar.vue
│ ├── basic
│ │ ├── Foo.vue
│ │ └── Hello.vue
│ └── tiptap
│ │ └── TipTap.vue
├── composables
│ ├── confirmation.ts
│ ├── messages.ts
│ ├── navigation.ts
│ ├── primeDataTable.ts
│ └── primevue
│ │ └── useDataTable.ts
├── env.d.ts
├── i18n
│ └── locales
│ │ ├── de.json
│ │ └── en.json
├── layouts
│ ├── 404.vue
│ ├── default.vue
│ └── error.vue
├── logic
│ ├── dark.ts
│ ├── index.ts
│ └── navigation.ts
├── main.ts
├── modules
│ ├── formkit.ts
│ ├── i18n.ts
│ ├── pinia.ts
│ ├── primevue.ts
│ └── sidebar.ts
├── pages
│ ├── Error.vue
│ ├── [...all].vue
│ ├── admin
│ │ └── index.vue
│ ├── data
│ │ ├── i18n.vue
│ │ └── stores.vue
│ ├── form
│ │ ├── index.vue
│ │ └── toggle.vue
│ ├── index.vue
│ ├── login.vue
│ ├── markdown
│ │ └── index.md
│ ├── prime
│ │ ├── datatable.vue
│ │ └── messages.vue
│ ├── store
│ │ └── Store.vue
│ ├── templates
│ │ └── Blueprint.vue
│ └── ui
│ │ ├── icons.vue
│ │ ├── tiptap.vue
│ │ └── uno.vue
├── shims-vue.d.ts
├── store
│ ├── auth.ts
│ ├── counter.ts
│ ├── data.ts
│ ├── index.ts
│ ├── state.ts
│ └── theme.ts
└── types.ts
├── test
├── components
│ ├── app
│ │ └── app_footer.test.ts
│ └── basic
│ │ └── basic.test.ts
└── sample
│ └── basic.test.ts
├── tsconfig.json
├── unocss.config.ts
├── vercel.json
├── vite-prime-vue-starter.png
└── vite.config.js
/.dockerignore:
--------------------------------------------------------------------------------
1 | **/node_modules
2 | **/dist
3 |
--------------------------------------------------------------------------------
/.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://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
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: "monthly"
12 |
--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
1 | name: 'ci'
2 | on:
3 | push:
4 | branches:
5 | - main
6 | pull_request:
7 | branches:
8 | - main
9 | jobs:
10 | test:
11 | runs-on: ubuntu-latest
12 | steps:
13 | - uses: actions/checkout@v3
14 |
15 | - name: Install pnpm
16 | uses: pnpm/action-setup@v2
17 | with:
18 | version: 8.2.0
19 |
20 | - name: Set node version to 18
21 | uses: actions/setup-node@v3
22 | with:
23 | node-version: 18
24 | cache: 'pnpm'
25 |
26 | - run: pnpm install
27 |
28 | - name: Run unit tests
29 | run: pnpm run test:unit
30 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist
4 | dist-ssr
5 |
6 | /instrumented
7 | /coverage
8 | .nyc_output
9 |
10 | .yarn
11 | yarn.lock
12 | .yarnrc.yml
13 |
14 | # local env files
15 | .env
16 | .env.local
17 | .env.*.local
18 |
19 | # Log files
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | pnpm-debug.log*
24 |
25 | # Editor directories and files
26 | .idea
27 | *.iml
28 | .vscode
29 | *.suo
30 | *.ntvs*
31 | *.njsproj
32 | *.sln
33 | *.sw?
34 |
35 | *.local
36 | LOCAL_NOTES.md
37 |
38 | *.log
39 |
40 | .gitconfig
41 |
42 | .vite-ssg-temp
43 |
44 | .yalc
45 |
46 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 |
4 | ## v2.0.4
5 |
6 | [compare changes](https://github.com/sfxcode/vite-primevue-starter/compare/v2.0.3...v2.0.4)
7 |
8 | ### 💅 Refactors
9 |
10 | - **dependencies:** Update all - remove quill dependency because it is not used in this demo ([b99034e](https://github.com/sfxcode/vite-primevue-starter/commit/b99034e))
11 |
12 | ### 🎨 Styles
13 |
14 | - **linting:** Fix Lint errors ([5f0fcf0](https://github.com/sfxcode/vite-primevue-starter/commit/5f0fcf0))
15 |
16 | ### ❤️ Contributors
17 |
18 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
19 |
20 | ## v2.0.3
21 |
22 | [compare changes](https://github.com/sfxcode/vite-primevue-starter/compare/v2.0.2...v2.0.3)
23 |
24 | ### 💅 Refactors
25 |
26 | - **dependencies:** Update all ([d0b5b57](https://github.com/sfxcode/vite-primevue-starter/commit/d0b5b57))
27 | - **dependencies:** Update all ([faccecc](https://github.com/sfxcode/vite-primevue-starter/commit/faccecc))
28 |
29 | ### ❤️ Contributors
30 |
31 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
32 |
33 | ## v2.0.2
34 |
35 | [compare changes](https://github.com/sfxcode/vite-primevue-starter/compare/v2.0.1...v2.0.2)
36 |
37 | ### 💅 Refactors
38 |
39 | - **dependencies:** Update all ([886f08d](https://github.com/sfxcode/vite-primevue-starter/commit/886f08d))
40 |
41 | ### ❤️ Contributors
42 |
43 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
44 |
45 | ## v2.0.1
46 |
47 | [compare changes](https://github.com/sfxcode/vite-primevue-starter/compare/0.9.0...v2.0.1)
48 |
49 | ### 🚀 Enhancements
50 |
51 | - Cached Store ([0383293](https://github.com/sfxcode/vite-primevue-starter/commit/0383293))
52 | - Cached Store ([015016b](https://github.com/sfxcode/vite-primevue-starter/commit/015016b))
53 | - DataTable ([0037de1](https://github.com/sfxcode/vite-primevue-starter/commit/0037de1))
54 | - DataTable ([f5bdfc3](https://github.com/sfxcode/vite-primevue-starter/commit/f5bdfc3))
55 | - **Validation:** Formkit and formkit-primevue added ([085c6e1](https://github.com/sfxcode/vite-primevue-starter/commit/085c6e1))
56 | - **Validation:** Formkit and formkit-primevue added ([d742da3](https://github.com/sfxcode/vite-primevue-starter/commit/d742da3))
57 | - **primevue:** Add new elements to module ([2ba1a30](https://github.com/sfxcode/vite-primevue-starter/commit/2ba1a30))
58 | - **primevue:** Add new elements to module ([b5bfcef](https://github.com/sfxcode/vite-primevue-starter/commit/b5bfcef))
59 | - **validation:** Add repeater example ([d7aaeda](https://github.com/sfxcode/vite-primevue-starter/commit/d7aaeda))
60 | - **admin:** Revoke Admin section ([54aa9e9](https://github.com/sfxcode/vite-primevue-starter/commit/54aa9e9))
61 |
62 | ### 🩹 Fixes
63 |
64 | - Menu always open on mobile ([e2c30a4](https://github.com/sfxcode/vite-primevue-starter/commit/e2c30a4))
65 | - SSG ([11bd690](https://github.com/sfxcode/vite-primevue-starter/commit/11bd690))
66 | - **modules:** GlobEager is deprecated, causes error #80 ([#80](https://github.com/sfxcode/vite-primevue-starter/issues/80))
67 | - **validation:** Add optinLabel and optionValue, needed since formkit-primevue 1.6 Update ([f687013](https://github.com/sfxcode/vite-primevue-starter/commit/f687013))
68 |
69 | ### 💅 Refactors
70 |
71 | - **test:** Vitest, cypress ([67bcf01](https://github.com/sfxcode/vite-primevue-starter/commit/67bcf01))
72 | - **markdown:** Sample Page and Config ([cb15901](https://github.com/sfxcode/vite-primevue-starter/commit/cb15901))
73 | - **themes:** Move to unpkg ([601ad5d](https://github.com/sfxcode/vite-primevue-starter/commit/601ad5d))
74 | - **ui:** Switch to Lara Design ([79b4c9c](https://github.com/sfxcode/vite-primevue-starter/commit/79b4c9c))
75 | - **ui:** Update Table Demo ([32fa02d](https://github.com/sfxcode/vite-primevue-starter/commit/32fa02d))
76 | - **datatable:** Use input icon ([b55b7a8](https://github.com/sfxcode/vite-primevue-starter/commit/b55b7a8))
77 | - **sidebar:** Use vue sidebar menu ([5520b42](https://github.com/sfxcode/vite-primevue-starter/commit/5520b42))
78 | - **sidebar:** Use vue sidebar menu ([2c0a956](https://github.com/sfxcode/vite-primevue-starter/commit/2c0a956))
79 | - **sidebar:** Use vue sidebar menu ([9cfb17c](https://github.com/sfxcode/vite-primevue-starter/commit/9cfb17c))
80 | - **unocss:** Load fonts locally ([7d136e2](https://github.com/sfxcode/vite-primevue-starter/commit/7d136e2))
81 | - **dependencies:** Remove unused ([e107a5e](https://github.com/sfxcode/vite-primevue-starter/commit/e107a5e))
82 | - **dependencies:** Remove unused ([9263c9a](https://github.com/sfxcode/vite-primevue-starter/commit/9263c9a))
83 |
84 | ### 📖 Documentation
85 |
86 | - **readme:** Change app image ([ac10670](https://github.com/sfxcode/vite-primevue-starter/commit/ac10670))
87 | - **readme:** Change app image ([11c07a6](https://github.com/sfxcode/vite-primevue-starter/commit/11c07a6))
88 | - **readme:** Change app image ([8251b16](https://github.com/sfxcode/vite-primevue-starter/commit/8251b16))
89 | - **README:** Variations ([f30383a](https://github.com/sfxcode/vite-primevue-starter/commit/f30383a))
90 | - **README:** Logging not a module (Replaced by consola) ([24265e8](https://github.com/sfxcode/vite-primevue-starter/commit/24265e8))
91 |
92 | ### 🏡 Chore
93 |
94 | - **Dependencies:** Update ([265b8d6](https://github.com/sfxcode/vite-primevue-starter/commit/265b8d6))
95 | - **Dependencies:** Update ([2a63a7c](https://github.com/sfxcode/vite-primevue-starter/commit/2a63a7c))
96 | - Add Vitest ([c5b9cdd](https://github.com/sfxcode/vite-primevue-starter/commit/c5b9cdd))
97 | - Add Vitest ([fa226c6](https://github.com/sfxcode/vite-primevue-starter/commit/fa226c6))
98 | - Add Vitest ([8c76aaa](https://github.com/sfxcode/vite-primevue-starter/commit/8c76aaa))
99 | - **Dependencies:** Update ([afabd85](https://github.com/sfxcode/vite-primevue-starter/commit/afabd85))
100 | - Dependency Updates ([b7dfccc](https://github.com/sfxcode/vite-primevue-starter/commit/b7dfccc))
101 | - **workflows:** Pnpm 8.2.0 ([2349d1b](https://github.com/sfxcode/vite-primevue-starter/commit/2349d1b))
102 | - **eslint:** Disable prettier ([2992572](https://github.com/sfxcode/vite-primevue-starter/commit/2992572))
103 | - **release:** New Version ([1557f9d](https://github.com/sfxcode/vite-primevue-starter/commit/1557f9d))
104 |
105 | ### ✅ Tests
106 |
107 | - **samples:** More vitest samples ([3a7c1ce](https://github.com/sfxcode/vite-primevue-starter/commit/3a7c1ce))
108 | - **samples:** More vitest samples ([b92630c](https://github.com/sfxcode/vite-primevue-starter/commit/b92630c))
109 | - **Vitest:** Fix component test by exclude vue from optimization ([9f02ab9](https://github.com/sfxcode/vite-primevue-starter/commit/9f02ab9))
110 |
111 | ### 🎨 Styles
112 |
113 | - Use cards in components ([93e725d](https://github.com/sfxcode/vite-primevue-starter/commit/93e725d))
114 | - Small fixes ([5011925](https://github.com/sfxcode/vite-primevue-starter/commit/5011925))
115 | - Small fixes ([f8726c1](https://github.com/sfxcode/vite-primevue-starter/commit/f8726c1))
116 | - **AdvertiseBox:** Move to mdi icon ([d097925](https://github.com/sfxcode/vite-primevue-starter/commit/d097925))
117 | - **AdvertiseBox:** Some styling ([8a9657f](https://github.com/sfxcode/vite-primevue-starter/commit/8a9657f))
118 | - **CDN:** Use cdn.jsdelivr.net ([1a94014](https://github.com/sfxcode/vite-primevue-starter/commit/1a94014))
119 | - **linting:** Fix Lint errors ([664b0e6](https://github.com/sfxcode/vite-primevue-starter/commit/664b0e6))
120 | - **linting:** Fix Lint errors ([2d35247](https://github.com/sfxcode/vite-primevue-starter/commit/2d35247))
121 | - **fonts:** Add Local Fonts ([d2ca929](https://github.com/sfxcode/vite-primevue-starter/commit/d2ca929))
122 | - **sass:** Removed unused files and fix menu color ([2243bdd](https://github.com/sfxcode/vite-primevue-starter/commit/2243bdd))
123 |
124 | ### ❤️ Contributors
125 |
126 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
127 |
128 |
--------------------------------------------------------------------------------
/CHANGES.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## 1.7.0 (2023-11-15)
4 | - Updade Design to Lara Theme
5 | - PrimeVUE 3.40
6 | - Update Stores
7 | - Update Login Demo Design
8 |
9 | ## 1.4.0 (2023-04-26)
10 | - PrimeVUE 3.27.0
11 | - Vite 4.3.3
12 | - @sfxcode/formkit-primevue 1.1.0
13 | - ## 1.2.6 (2022-09-13)
14 | - PrimeVUE 3.17.0
15 |
16 | ## 1.1.8 (2022-02-17)
17 | - PrimeVUE 3.12.0
18 |
19 | ## 1.1.5 (2022-01-12)
20 | * more vitest samples
21 | * vitest ui (component tests on ui fail - work on standard mode)
22 | *
23 | ## 1.1.1 (2021-12-16)
24 | - added UnoCSS
25 | - removed tailwind
26 | - removed primeflex
27 |
28 | ## 1.1.0 (2021-12-16)
29 | * Validation With Vuelidate 2
30 |
31 | ## 1.0.9 (2021-12-16)
32 | * add directiveTransforms
33 |
34 | ## 1.0.6 (2021-12-13)
35 | - Tailwind 3
36 |
37 | ## 1.0.5 (2021-12-8)
38 | - PrimeVUE 3.10.0
39 |
40 | ## 1.0.3 (2021-11-25)
41 | - PrimeVUE 3.9.1
42 |
43 | ## 1.0.3 (2021-11-23)
44 | - dependency updates
45 |
46 | ## 1.0.1 (2021-10-20)
47 | - dependency updates
48 | - reformat with prettier
49 | - use inter font tailwind plugin
50 |
51 | ## 1.0.0 (2021-10-18)
52 | - dependency updates
53 | - restricted admin area
54 |
55 | ## 0.9.8 (2021-10-10)
56 | - use cypress for integration and component testing
57 |
58 | ## 0.9.0 (2021-09-13)
59 | - Many Vite Plugis added
60 | - Pages / Layout / Markdown
61 | - Modules
62 |
63 | ## 0.8.0 (2021-08-15)
64 | - Initial version
65 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:latest as build-stage
2 | WORKDIR /app
3 | COPY package*.json ./
4 |
5 | RUN curl -sL https://unpkg.com/@pnpm/self-installer | node
6 |
7 | RUN pnpm install
8 | COPY ./ .
9 | RUN pnpm build
10 |
11 | FROM nginx as production-stage
12 | RUN mkdir /app
13 | COPY --from=build-stage /app/dist /app
14 | COPY nginx.conf /etc/nginx/nginx.conf
15 |
16 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Ville Säävuori
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vite Typescript + PrimeVue Starter
2 |
3 | Build your VUE.js App with the latest and fastest VITE Plugins (nuxt.js like).
4 | First Class PrimeVUE support.
5 |
6 | 
7 |
8 | [](https://github.com/sfxcode/vite-primevue-starter/actions/workflows/main.yml)
9 |
10 | THX to [antfu / Vitesse](https://github.com/antfu/vitesse) for starter code
11 |
12 | ## Features
13 |
14 | - Vue 3.4
15 | - Vite 6
16 | - Vitest (Testing Framework)
17 | - Composition API
18 | - Script Setup
19 | - Routing VitePages / ViteLayout
20 | - Pina as Store / CachedPiniaStore for effective data caching
21 | - PrimeVue with Aura Theme
22 | - Validation, PrimeVue Form elements by [formkit-primevue](https://github.com/sfxcode/formkit-primevue)
23 | - Markdown Support (VitePages)
24 | - TypeScript 5
25 | - UnoCSS
26 | - SSG Support
27 | - Eslint
28 |
29 | ### Modules
30 | - i18n
31 | - nprogress
32 | - pinia
33 | - primevue
34 |
35 | ## Variations
36 |
37 | ### nuxt3-primevue-starter
38 |
39 | Nuxt3 Primevue Starter Template
40 |
41 | [Github Repository](https://github.com/sfxcode/nuxt3-primevue-starter)
42 |
43 | [App on Netlify](https://nuxt3-primevue-starter.netlify.app/)
44 |
45 | - [Nuxt 3](https://nuxt.com) - SSR, ESR, File-based routing, components auto importing, modules, etc.
46 | - Vite - Instant HMR
47 | - [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
48 | - Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/antfu/unocss)
49 | - [State Management via Pinia](https://pinia.esm.dev)
50 | - PrimeVue 4.2.x
51 | - Logging
52 |
53 | ### vite-primevue-starter-lite
54 |
55 | [Github Repository](https://github.com/sfxcode/vite-primevue-starter-lite)
56 |
57 | [App on Netlify](https://vite-primevue-starter-lite.netlify.app/)
58 |
59 | ## Project setup and usage
60 |
61 | Install node:
62 |
63 | **Latest node LTS version required (18)**
64 | Use node manager like **nvm** to install.
65 |
66 | Install pnpm:
67 | [https://pnpm.io/installation](https://pnpm.io/installation)
68 |
69 | Install dependencies:
70 |
71 | ```
72 | pnpm install
73 | ```
74 |
75 | Run development server:
76 |
77 | ```
78 | pnpm dev
79 | ```
80 |
81 | Component test runner:
82 |
83 | ```
84 | pnpm test:unit
85 | ```
86 |
87 | Build and preview built site locally:
88 |
89 | ```
90 | pnpm preview
91 | ```
92 |
93 | Build:
94 |
95 | ```
96 | pnpm build
97 | ```
98 |
99 | ## Tools
100 |
101 | I use IntelliJ with VUE.js plugin.
102 |
103 | ## Supporters
104 |
105 | JetBrains is supporting this open source project with:
106 |
107 | [](http://www.jetbrains.com/idea/)
108 |
109 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import antfu from '@antfu/eslint-config'
2 | import unocss from '@unocss/eslint-plugin'
3 |
4 | export default antfu(
5 | {
6 | ignores: ['*/shims-vue.d.ts'],
7 | },
8 |
9 | unocss.configs.flat,
10 | {
11 | rules: {
12 | 'vue/no-mutating-props': ['error', {
13 | shallowOnly: true,
14 | }],
15 | },
16 | },
17 | )
18 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Vite Typescript + PrimeVue Starter
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build.environment]
2 | NPM_FLAGS = "--prefix=/dev/null"
3 | NODE_VERSION = "18"
4 |
5 | [build]
6 | command = "pnpm run build"
7 |
8 | [[redirects]]
9 | from = "/*"
10 | to = "/index.html"
11 | status = 200
12 |
--------------------------------------------------------------------------------
/nginx.conf:
--------------------------------------------------------------------------------
1 | user nginx;
2 | worker_processes 1;
3 | error_log /var/log/nginx/error.log warn;
4 | pid /var/run/nginx.pid;
5 | events {
6 | worker_connections 1024;
7 | }
8 | http {
9 | include /etc/nginx/mime.types;
10 | default_type application/octet-stream;
11 | log_format main '$remote_addr - $remote_user [$time_local] "$request" '
12 | '$status $body_bytes_sent "$http_referer" '
13 | '"$http_user_agent" "$http_x_forwarded_for"';
14 | access_log /var/log/nginx/access.log main;
15 | sendfile on;
16 | keepalive_timeout 65;
17 | server {
18 | listen 80;
19 | server_name localhost;
20 | location / {
21 | root /app;
22 | index index.html;
23 | try_files $uri $uri/ /index.html;
24 | }
25 | error_page 500 502 503 504 /50x.html;
26 | location = /50x.html {
27 | root /usr/share/nginx/html;
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vite-primevue-starter",
3 | "version": "2.0.4",
4 | "license": "MIT",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite --port 3333 --open",
8 | "build": "vite build",
9 | "preview": "vite build && vite preview",
10 | "preview-https": "serve dist",
11 | "start": "pnpm dev & wait-on tcp:3333 -v",
12 | "lint": "eslint ./src",
13 | "lint:fix": "eslint --fix ./src",
14 | "test:unit": "vitest --run --reporter verbose",
15 | "test:coverage": "vitest run --coverage",
16 | "test:ui": "vitest --ui",
17 | "release": "npm run lint && npm run build && changelogen --patch --release && git push --follow-tags"
18 | },
19 | "devDependencies": {
20 | "@antfu/eslint-config": "^4.13.2",
21 | "@iconify-json/carbon": "^1.2.8",
22 | "@iconify-json/mdi": "^1.2.3",
23 | "@iconify-json/prime": "^1.2.2",
24 | "@iconify-json/twemoji": "^1.2.2",
25 | "@intlify/unplugin-vue-i18n": "^6.0.8",
26 | "@primevue/themes": "^4.3.4",
27 | "@sfxcode/formkit-primevue": "^2.9.1",
28 | "@tiptap/extension-highlight": "^2.12.0",
29 | "@tiptap/extension-text-align": "^2.12.0",
30 | "@tiptap/extension-text-style": "^2.12.0",
31 | "@tiptap/pm": "^2.12.0",
32 | "@tiptap/starter-kit": "^2.12.0",
33 | "@tiptap/vue-3": "^2.12.0",
34 | "@types/markdown-it-link-attributes": "^3.0.5",
35 | "@unocss/eslint-config": "66.1.2",
36 | "@unocss/preset-attributify": "66.1.2",
37 | "@unocss/preset-icons": "66.1.2",
38 | "@unocss/preset-typography": "66.1.2",
39 | "@vitejs/plugin-vue": "^5.2.4",
40 | "@vitest/ui": "^3.1.4",
41 | "@vue/server-renderer": "^3.5.14",
42 | "@vue/test-utils": "^2.4.6",
43 | "@vuedx/typecheck": "~0.7.6",
44 | "@vuedx/typescript-plugin-vue": "~0.7.6",
45 | "@vueuse/core": "^13.2.0",
46 | "@vueuse/head": "~2.0.0",
47 | "add": "^2.0.6",
48 | "autoprefixer": "^10.4.21",
49 | "c8": "^10.1.3",
50 | "changelogen": "^0.6.1",
51 | "chart.js": "^4.4.9",
52 | "consola": "^3.4.2",
53 | "cross-env": "^7.0.3",
54 | "eslint": "^9.27.0",
55 | "happy-dom": "^17.4.7",
56 | "https-localhost": "^4.7.1",
57 | "markdown-it": "^14.1.0",
58 | "markdown-it-link-attributes": "^4.0.1",
59 | "markdown-it-prism": "^3.0.0",
60 | "pinia": "~3.0.2",
61 | "pinia-cached-store": "^0.6.6",
62 | "pnpm": "^10.11.0",
63 | "primeicons": "^7.0.0",
64 | "primevue": "^4.3.4",
65 | "prism-theme-vars": "^0.2.5",
66 | "rxjs": "^7.8.2",
67 | "sass": "1.89.0",
68 | "tslib": "^2.8.1",
69 | "typescript": "^5.8.3",
70 | "unocss": "66.1.2",
71 | "unplugin-auto-import": "^19.2.0",
72 | "unplugin-vue-components": "^28.5.0",
73 | "unplugin-vue-markdown": "^28.3.1",
74 | "vite": "^6.3.5",
75 | "vite-plugin-inspect": "^11.1.0",
76 | "vite-plugin-pages": "^0.33.0",
77 | "vite-plugin-pwa": "^1.0.0",
78 | "vite-plugin-restart": "^0.4.2",
79 | "vite-plugin-vue-devtools": "^7.7.6",
80 | "vite-plugin-vue-layouts": "^0.11.0",
81 | "vite-ssg": "^27.0.1",
82 | "vitest": "^3.1.4",
83 | "vue": "^3.5.14",
84 | "vue-demi": "^0.14.10",
85 | "vue-i18n": "^11.1.4",
86 | "vue-router": "^4.5.1",
87 | "vue-sidebar-menu": "^5.7.0",
88 | "vue-tsc": "^2.2.10",
89 | "wait-on": "~8.0.3"
90 | },
91 | "engines": {
92 | "node": ">=18",
93 | "pnpm": ">=7"
94 | },
95 | "packageManager": "pnpm@10.2.1+sha512.398035c7bd696d0ba0b10a688ed558285329d27ea994804a52bad9167d8e3a72bcb993f9699585d3ca25779ac64949ef422757a6c31102c12ab932e5cbe5cc92"
96 | }
97 |
--------------------------------------------------------------------------------
/public/assets/fonts/dmmono-612bc94f.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/dmmono-612bc94f.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/dmmono-cbe07c46.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/dmmono-cbe07c46.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/inter-2a19f7d8.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/inter-2a19f7d8.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/inter-5fac53e3.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/inter-5fac53e3.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/inter-61305330.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/inter-61305330.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/inter-88663f47.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/inter-88663f47.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/inter-890a0cca.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/inter-890a0cca.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/inter-9b37f5d7.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/inter-9b37f5d7.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/inter-bf9480af.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/inter-bf9480af.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/robotocondensed-0dbc43c7.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/robotocondensed-0dbc43c7.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/robotocondensed-3bbb4ae8.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/robotocondensed-3bbb4ae8.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/robotocondensed-4daf5cdd.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/robotocondensed-4daf5cdd.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/robotocondensed-5553a467.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/robotocondensed-5553a467.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/robotocondensed-abe48f47.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/robotocondensed-abe48f47.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/robotocondensed-ca4bb2ff.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/robotocondensed-ca4bb2ff.woff2
--------------------------------------------------------------------------------
/public/assets/fonts/robotocondensed-ea86c23d.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/assets/fonts/robotocondensed-ea86c23d.woff2
--------------------------------------------------------------------------------
/public/data/customers-medium.json:
--------------------------------------------------------------------------------
1 | {
2 | "data": [
3 | {
4 | "id": 1000,
5 | "name": "James Butt",
6 | "country": {
7 | "name": "Algeria",
8 | "code": "dz"
9 | },
10 | "company": "Benton, John B Jr",
11 | "date": "2015-09-13",
12 | "status": "unqualified",
13 | "activity": 17,
14 | "representative": {
15 | "name": "Ioni Bowcher",
16 | "image": "ionibowcher.png"
17 | }
18 | },
19 | {
20 | "id": 1001,
21 | "name": "Josephine Darakjy",
22 | "country": {
23 | "name": "Egypt",
24 | "code": "eg"
25 | },
26 | "company": "Chanay, Jeffrey A Esq",
27 | "date": "2019-02-09",
28 | "status": "proposal",
29 | "activity": 0,
30 | "representative": {
31 | "name": "Amy Elsner",
32 | "image": "amyelsner.png"
33 | }
34 | },
35 | {
36 | "id": 1002,
37 | "name": "Art Venere",
38 | "country": {
39 | "name": "Panama",
40 | "code": "pa"
41 | },
42 | "company": "Chemel, James L Cpa",
43 | "date": "2017-05-13",
44 | "status": "qualified",
45 | "activity": 63,
46 | "representative": {
47 | "name": "Asiya Javayant",
48 | "image": "asiyajavayant.png"
49 | }
50 | },
51 | {
52 | "id": 1003,
53 | "name": "Lenna Paprocki",
54 | "country": {
55 | "name": "Slovenia",
56 | "code": "si"
57 | },
58 | "company": "Feltz Printing Service",
59 | "date": "2020-09-15",
60 | "status": "new",
61 | "activity": 37,
62 | "representative": {
63 | "name": "Xuxue Feng",
64 | "image": "xuxuefeng.png"
65 | }
66 | },
67 | {
68 | "id": 1004,
69 | "name": "Donette Foller",
70 | "country": {
71 | "name": "South Africa",
72 | "code": "za"
73 | },
74 | "company": "Printing Dimensions",
75 | "date": "2016-05-20",
76 | "status": "proposal",
77 | "activity": 33,
78 | "representative": {
79 | "name": "Asiya Javayant",
80 | "image": "asiyajavayant.png"
81 | }
82 | },
83 | {
84 | "id": 1005,
85 | "name": "Simona Morasca",
86 | "country": {
87 | "name": "Egypt",
88 | "code": "eg"
89 | },
90 | "company": "Chapman, Ross E Esq",
91 | "date": "2018-02-16",
92 | "status": "qualified",
93 | "activity": 68,
94 | "representative": {
95 | "name": "Ivan Magalhaes",
96 | "image": "ivanmagalhaes.png"
97 | }
98 | },
99 | {
100 | "id": 1006,
101 | "name": "Mitsue Tollner",
102 | "country": {
103 | "name": "Paraguay",
104 | "code": "py"
105 | },
106 | "company": "Morlong Associates",
107 | "date": "2018-02-19",
108 | "status": "renewal",
109 | "activity": 54,
110 | "representative": {
111 | "name": "Ivan Magalhaes",
112 | "image": "ivanmagalhaes.png"
113 | }
114 | },
115 | {
116 | "id": 1007,
117 | "name": "Leota Dilliard",
118 | "country": {
119 | "name": "Serbia",
120 | "code": "rs"
121 | },
122 | "company": "Commercial Press",
123 | "date": "2019-08-13",
124 | "status": "renewal",
125 | "activity": 69,
126 | "representative": {
127 | "name": "Onyama Limba",
128 | "image": "onyamalimba.png"
129 | }
130 | },
131 | {
132 | "id": 1008,
133 | "name": "Sage Wieser",
134 | "country": {
135 | "name": "Egypt",
136 | "code": "eg"
137 | },
138 | "company": "Truhlar And Truhlar Attys",
139 | "date": "2018-11-21",
140 | "status": "unqualified",
141 | "activity": 76,
142 | "representative": {
143 | "name": "Ivan Magalhaes",
144 | "image": "ivanmagalhaes.png"
145 | }
146 | },
147 | {
148 | "id": 1009,
149 | "name": "Kris Marrier",
150 | "country": {
151 | "name": "Mexico",
152 | "code": "mx"
153 | },
154 | "company": "King, Christopher A Esq",
155 | "date": "2015-07-07",
156 | "status": "proposal",
157 | "activity": 3,
158 | "representative": {
159 | "name": "Onyama Limba",
160 | "image": "onyamalimba.png"
161 | }
162 | },
163 | {
164 | "id": 1010,
165 | "name": "Minna Amigon",
166 | "country": {
167 | "name": "Romania",
168 | "code": "ro"
169 | },
170 | "company": "Dorl, James J Esq",
171 | "date": "2018-11-07",
172 | "status": "qualified",
173 | "activity": 38,
174 | "representative": {
175 | "name": "Anna Fali",
176 | "image": "annafali.png"
177 | }
178 | },
179 | {
180 | "id": 1011,
181 | "name": "Abel Maclead",
182 | "country": {
183 | "name": "Singapore",
184 | "code": "sg"
185 | },
186 | "company": "Rangoni Of Florence",
187 | "date": "2017-03-11",
188 | "status": "qualified",
189 | "activity": 87,
190 | "representative": {
191 | "name": "Bernardo Dominic",
192 | "image": "bernardodominic.png"
193 | }
194 | },
195 | {
196 | "id": 1012,
197 | "name": "Kiley Caldarera",
198 | "country": {
199 | "name": "Serbia",
200 | "code": "rs"
201 | },
202 | "company": "Feiner Bros",
203 | "date": "2015-10-20",
204 | "status": "unqualified",
205 | "activity": 80,
206 | "representative": {
207 | "name": "Onyama Limba",
208 | "image": "onyamalimba.png"
209 | }
210 | },
211 | {
212 | "id": 1013,
213 | "name": "Graciela Ruta",
214 | "country": {
215 | "name": "Chile",
216 | "code": "cl"
217 | },
218 | "company": "Buckley Miller \u0026 Wright",
219 | "date": "2016-07-25",
220 | "status": "negotiation",
221 | "activity": 59,
222 | "representative": {
223 | "name": "Amy Elsner",
224 | "image": "amyelsner.png"
225 | }
226 | },
227 | {
228 | "id": 1014,
229 | "name": "Cammy Albares",
230 | "country": {
231 | "name": "Philippines",
232 | "code": "ph"
233 | },
234 | "company": "Rousseaux, Michael Esq",
235 | "date": "2019-06-25",
236 | "status": "new",
237 | "activity": 90,
238 | "representative": {
239 | "name": "Asiya Javayant",
240 | "image": "asiyajavayant.png"
241 | }
242 | },
243 | {
244 | "id": 1015,
245 | "name": "Mattie Poquette",
246 | "country": {
247 | "name": "Venezuela",
248 | "code": "ve"
249 | },
250 | "company": "Century Communications",
251 | "date": "2017-12-12",
252 | "status": "negotiation",
253 | "activity": 52,
254 | "representative": {
255 | "name": "Anna Fali",
256 | "image": "annafali.png"
257 | }
258 | },
259 | {
260 | "id": 1016,
261 | "name": "Meaghan Garufi",
262 | "country": {
263 | "name": "Malaysia",
264 | "code": "my"
265 | },
266 | "company": "Bolton, Wilbur Esq",
267 | "date": "2018-07-04",
268 | "status": "unqualified",
269 | "activity": 31,
270 | "representative": {
271 | "name": "Ivan Magalhaes",
272 | "image": "ivanmagalhaes.png"
273 | }
274 | },
275 | {
276 | "id": 1017,
277 | "name": "Gladys Rim",
278 | "country": {
279 | "name": "Netherlands",
280 | "code": "nl"
281 | },
282 | "company": "T M Byxbee Company Pc",
283 | "date": "2020-02-27",
284 | "status": "renewal",
285 | "activity": 48,
286 | "representative": {
287 | "name": "Stephen Shaw",
288 | "image": "stephenshaw.png"
289 | }
290 | },
291 | {
292 | "id": 1018,
293 | "name": "Yuki Whobrey",
294 | "country": {
295 | "name": "Israel",
296 | "code": "il"
297 | },
298 | "company": "Farmers Insurance Group",
299 | "date": "2017-12-21",
300 | "status": "negotiation",
301 | "activity": 16,
302 | "representative": {
303 | "name": "Bernardo Dominic",
304 | "image": "bernardodominic.png"
305 | }
306 | },
307 | {
308 | "id": 1019,
309 | "name": "Fletcher Flosi",
310 | "country": {
311 | "name": "Argentina",
312 | "code": "ar"
313 | },
314 | "company": "Post Box Services Plus",
315 | "date": "2016-01-04",
316 | "status": "renewal",
317 | "activity": 19,
318 | "representative": {
319 | "name": "Xuxue Feng",
320 | "image": "xuxuefeng.png"
321 | }
322 | },
323 | {
324 | "id": 1020,
325 | "name": "Bette Nicka",
326 | "country": {
327 | "name": "Paraguay",
328 | "code": "py"
329 | },
330 | "company": "Sport En Art",
331 | "date": "2016-10-21",
332 | "status": "renewal",
333 | "activity": 100,
334 | "representative": {
335 | "name": "Onyama Limba",
336 | "image": "onyamalimba.png"
337 | }
338 | },
339 | {
340 | "id": 1021,
341 | "name": "Veronika Inouye",
342 | "country": {
343 | "name": "Ecuador",
344 | "code": "ec"
345 | },
346 | "company": "C 4 Network Inc",
347 | "date": "2017-03-24",
348 | "status": "renewal",
349 | "activity": 72,
350 | "representative": {
351 | "name": "Ioni Bowcher",
352 | "image": "ionibowcher.png"
353 | }
354 | },
355 | {
356 | "id": 1022,
357 | "name": "Willard Kolmetz",
358 | "country": {
359 | "name": "Tunisia",
360 | "code": "tn"
361 | },
362 | "company": "Ingalls, Donald R Esq",
363 | "date": "2017-04-15",
364 | "status": "renewal",
365 | "activity": 94,
366 | "representative": {
367 | "name": "Asiya Javayant",
368 | "image": "asiyajavayant.png"
369 | }
370 | },
371 | {
372 | "id": 1023,
373 | "name": "Maryann Royster",
374 | "country": {
375 | "name": "Belarus",
376 | "code": "by"
377 | },
378 | "company": "Franklin, Peter L Esq",
379 | "date": "2017-03-11",
380 | "status": "qualified",
381 | "activity": 56,
382 | "representative": {
383 | "name": "Elwin Sharvill",
384 | "image": "elwinsharvill.png"
385 | }
386 | },
387 | {
388 | "id": 1024,
389 | "name": "Alisha Slusarski",
390 | "country": {
391 | "name": "Iceland",
392 | "code": "is"
393 | },
394 | "company": "Wtlz Power 107 Fm",
395 | "date": "2018-03-27",
396 | "status": "qualified",
397 | "activity": 7,
398 | "representative": {
399 | "name": "Stephen Shaw",
400 | "image": "stephenshaw.png"
401 | }
402 | },
403 | {
404 | "id": 1025,
405 | "name": "Allene Iturbide",
406 | "country": {
407 | "name": "Italy",
408 | "code": "it"
409 | },
410 | "company": "Ledecky, David Esq",
411 | "date": "2016-02-20",
412 | "status": "qualified",
413 | "activity": 1,
414 | "representative": {
415 | "name": "Ivan Magalhaes",
416 | "image": "ivanmagalhaes.png"
417 | }
418 | },
419 | {
420 | "id": 1026,
421 | "name": "Chanel Caudy",
422 | "country": {
423 | "name": "Argentina",
424 | "code": "ar"
425 | },
426 | "company": "Professional Image Inc",
427 | "date": "2018-06-24",
428 | "status": "new",
429 | "activity": 26,
430 | "representative": {
431 | "name": "Ioni Bowcher",
432 | "image": "ionibowcher.png"
433 | }
434 | },
435 | {
436 | "id": 1027,
437 | "name": "Ezekiel Chui",
438 | "country": {
439 | "name": "Ireland",
440 | "code": "ie"
441 | },
442 | "company": "Sider, Donald C Esq",
443 | "date": "2016-09-24",
444 | "status": "new",
445 | "activity": 76,
446 | "representative": {
447 | "name": "Amy Elsner",
448 | "image": "amyelsner.png"
449 | }
450 | },
451 | {
452 | "id": 1028,
453 | "name": "Willow Kusko",
454 | "country": {
455 | "name": "Romania",
456 | "code": "ro"
457 | },
458 | "company": "U Pull It",
459 | "date": "2020-04-11",
460 | "status": "qualified",
461 | "activity": 7,
462 | "representative": {
463 | "name": "Onyama Limba",
464 | "image": "onyamalimba.png"
465 | }
466 | },
467 | {
468 | "id": 1029,
469 | "name": "Bernardo Figeroa",
470 | "country": {
471 | "name": "Israel",
472 | "code": "il"
473 | },
474 | "company": "Clark, Richard Cpa",
475 | "date": "2018-04-11",
476 | "status": "renewal",
477 | "activity": 81,
478 | "representative": {
479 | "name": "Ioni Bowcher",
480 | "image": "ionibowcher.png"
481 | }
482 | },
483 | {
484 | "id": 1030,
485 | "name": "Ammie Corrio",
486 | "country": {
487 | "name": "Hungary",
488 | "code": "hu"
489 | },
490 | "company": "Moskowitz, Barry S",
491 | "date": "2016-06-11",
492 | "status": "negotiation",
493 | "activity": 56,
494 | "representative": {
495 | "name": "Asiya Javayant",
496 | "image": "asiyajavayant.png"
497 | }
498 | },
499 | {
500 | "id": 1031,
501 | "name": "Francine Vocelka",
502 | "country": {
503 | "name": "Honduras",
504 | "code": "hn"
505 | },
506 | "company": "Cascade Realty Advisors Inc",
507 | "date": "2017-08-02",
508 | "status": "qualified",
509 | "activity": 94,
510 | "representative": {
511 | "name": "Ioni Bowcher",
512 | "image": "ionibowcher.png"
513 | }
514 | },
515 | {
516 | "id": 1032,
517 | "name": "Ernie Stenseth",
518 | "country": {
519 | "name": "Australia",
520 | "code": "au"
521 | },
522 | "company": "Knwz Newsradio",
523 | "date": "2018-06-06",
524 | "status": "renewal",
525 | "activity": 68,
526 | "representative": {
527 | "name": "Xuxue Feng",
528 | "image": "xuxuefeng.png"
529 | }
530 | },
531 | {
532 | "id": 1033,
533 | "name": "Albina Glick",
534 | "country": {
535 | "name": "Ukraine",
536 | "code": "ua"
537 | },
538 | "company": "Giampetro, Anthony D",
539 | "date": "2019-08-08",
540 | "status": "proposal",
541 | "activity": 85,
542 | "representative": {
543 | "name": "Bernardo Dominic",
544 | "image": "bernardodominic.png"
545 | }
546 | },
547 | {
548 | "id": 1034,
549 | "name": "Alishia Sergi",
550 | "country": {
551 | "name": "Qatar",
552 | "code": "qa"
553 | },
554 | "company": "Milford Enterprises Inc",
555 | "date": "2018-05-19",
556 | "status": "negotiation",
557 | "activity": 46,
558 | "representative": {
559 | "name": "Ivan Magalhaes",
560 | "image": "ivanmagalhaes.png"
561 | }
562 | },
563 | {
564 | "id": 1035,
565 | "name": "Solange Shinko",
566 | "country": {
567 | "name": "Cameroon",
568 | "code": "cm"
569 | },
570 | "company": "Mosocco, Ronald A",
571 | "date": "2015-02-12",
572 | "status": "qualified",
573 | "activity": 32,
574 | "representative": {
575 | "name": "Onyama Limba",
576 | "image": "onyamalimba.png"
577 | }
578 | },
579 | {
580 | "id": 1036,
581 | "name": "Jose Stockham",
582 | "country": {
583 | "name": "Italy",
584 | "code": "it"
585 | },
586 | "company": "Tri State Refueler Co",
587 | "date": "2018-04-25",
588 | "status": "qualified",
589 | "activity": 77,
590 | "representative": {
591 | "name": "Amy Elsner",
592 | "image": "amyelsner.png"
593 | }
594 | },
595 | {
596 | "id": 1037,
597 | "name": "Rozella Ostrosky",
598 | "country": {
599 | "name": "Venezuela",
600 | "code": "ve"
601 | },
602 | "company": "Parkway Company",
603 | "date": "2016-02-27",
604 | "status": "unqualified",
605 | "activity": 66,
606 | "representative": {
607 | "name": "Amy Elsner",
608 | "image": "amyelsner.png"
609 | }
610 | },
611 | {
612 | "id": 1038,
613 | "name": "Valentine Gillian",
614 | "country": {
615 | "name": "Paraguay",
616 | "code": "py"
617 | },
618 | "company": "Fbs Business Finance",
619 | "date": "2019-09-17",
620 | "status": "qualified",
621 | "activity": 25,
622 | "representative": {
623 | "name": "Bernardo Dominic",
624 | "image": "bernardodominic.png"
625 | }
626 | },
627 | {
628 | "id": 1039,
629 | "name": "Kati Rulapaugh",
630 | "country": {
631 | "name": "Puerto Rico",
632 | "code": "pr"
633 | },
634 | "company": "Eder Assocs Consltng Engrs Pc",
635 | "date": "2016-12-03",
636 | "status": "renewal",
637 | "activity": 51,
638 | "representative": {
639 | "name": "Ioni Bowcher",
640 | "image": "ionibowcher.png"
641 | }
642 | },
643 | {
644 | "id": 1040,
645 | "name": "Youlanda Schemmer",
646 | "country": {
647 | "name": "Bolivia",
648 | "code": "bo"
649 | },
650 | "company": "Tri M Tool Inc",
651 | "date": "2017-12-15",
652 | "status": "negotiation",
653 | "activity": 49,
654 | "representative": {
655 | "name": "Xuxue Feng",
656 | "image": "xuxuefeng.png"
657 | }
658 | },
659 | {
660 | "id": 1041,
661 | "name": "Dyan Oldroyd",
662 | "country": {
663 | "name": "Argentina",
664 | "code": "ar"
665 | },
666 | "company": "International Eyelets Inc",
667 | "date": "2017-02-02",
668 | "status": "qualified",
669 | "activity": 5,
670 | "representative": {
671 | "name": "Amy Elsner",
672 | "image": "amyelsner.png"
673 | }
674 | },
675 | {
676 | "id": 1042,
677 | "name": "Roxane Campain",
678 | "country": {
679 | "name": "France",
680 | "code": "fr"
681 | },
682 | "company": "Rapid Trading Intl",
683 | "date": "2018-12-25",
684 | "status": "unqualified",
685 | "activity": 100,
686 | "representative": {
687 | "name": "Anna Fali",
688 | "image": "annafali.png"
689 | }
690 | },
691 | {
692 | "id": 1043,
693 | "name": "Lavera Perin",
694 | "country": {
695 | "name": "Vietnam",
696 | "code": "vn"
697 | },
698 | "company": "Abc Enterprises Inc",
699 | "date": "2018-04-10",
700 | "status": "qualified",
701 | "activity": 71,
702 | "representative": {
703 | "name": "Stephen Shaw",
704 | "image": "stephenshaw.png"
705 | }
706 | },
707 | {
708 | "id": 1044,
709 | "name": "Erick Ferencz",
710 | "country": {
711 | "name": "Belgium",
712 | "code": "be"
713 | },
714 | "company": "Cindy Turner Associates",
715 | "date": "2018-05-06",
716 | "status": "unqualified",
717 | "activity": 54,
718 | "representative": {
719 | "name": "Amy Elsner",
720 | "image": "amyelsner.png"
721 | }
722 | },
723 | {
724 | "id": 1045,
725 | "name": "Fatima Saylors",
726 | "country": {
727 | "name": "Canada",
728 | "code": "ca"
729 | },
730 | "company": "Stanton, James D Esq",
731 | "date": "2019-07-10",
732 | "status": "renewal",
733 | "activity": 93,
734 | "representative": {
735 | "name": "Onyama Limba",
736 | "image": "onyamalimba.png"
737 | }
738 | },
739 | {
740 | "id": 1046,
741 | "name": "Jina Briddick",
742 | "country": {
743 | "name": "Mexico",
744 | "code": "mx"
745 | },
746 | "company": "Grace Pastries Inc",
747 | "date": "2018-02-19",
748 | "status": "unqualified",
749 | "activity": 97,
750 | "representative": {
751 | "name": "Xuxue Feng",
752 | "image": "xuxuefeng.png"
753 | }
754 | },
755 | {
756 | "id": 1047,
757 | "name": "Kanisha Waycott",
758 | "country": {
759 | "name": "Ecuador",
760 | "code": "ec"
761 | },
762 | "company": "Schroer, Gene E Esq",
763 | "date": "2019-11-27",
764 | "status": "new",
765 | "activity": 80,
766 | "representative": {
767 | "name": "Xuxue Feng",
768 | "image": "xuxuefeng.png"
769 | }
770 | },
771 | {
772 | "id": 1048,
773 | "name": "Emerson Bowley",
774 | "country": {
775 | "name": "Finland",
776 | "code": "fi"
777 | },
778 | "company": "Knights Inn",
779 | "date": "2018-11-24",
780 | "status": "new",
781 | "activity": 63,
782 | "representative": {
783 | "name": "Stephen Shaw",
784 | "image": "stephenshaw.png"
785 | }
786 | },
787 | {
788 | "id": 1049,
789 | "name": "Blair Malet",
790 | "country": {
791 | "name": "Finland",
792 | "code": "fi"
793 | },
794 | "company": "Bollinger Mach Shp \u0026 Shipyard",
795 | "date": "2018-04-19",
796 | "status": "new",
797 | "activity": 92,
798 | "representative": {
799 | "name": "Asiya Javayant",
800 | "image": "asiyajavayant.png"
801 | }
802 | }
803 | ]
804 | }
--------------------------------------------------------------------------------
/public/data/products.json:
--------------------------------------------------------------------------------
1 | {
2 | "data": [
3 | {
4 | "id": "1000",
5 | "code": "f230fh0g3",
6 | "name": "Bamboo Watch",
7 | "description": "Product Description",
8 | "image": "bamboo-watch.jpg",
9 | "price": 65,
10 | "category": "Accessories",
11 | "quantity": 24,
12 | "inventoryStatus": "INSTOCK",
13 | "rating": 5
14 | },
15 | {
16 | "id": "1001",
17 | "code": "nvklal433",
18 | "name": "Black Watch",
19 | "description": "Product Description",
20 | "image": "black-watch.jpg",
21 | "price": 72,
22 | "category": "Accessories",
23 | "quantity": 61,
24 | "inventoryStatus": "INSTOCK",
25 | "rating": 4
26 | },
27 | {
28 | "id": "1002",
29 | "code": "zz21cz3c1",
30 | "name": "Blue Band",
31 | "description": "Product Description",
32 | "image": "blue-band.jpg",
33 | "price": 79,
34 | "category": "Fitness",
35 | "quantity": 2,
36 | "inventoryStatus": "LOWSTOCK",
37 | "rating": 3
38 | },
39 | {
40 | "id": "1003",
41 | "code": "244wgerg2",
42 | "name": "Blue T-Shirt",
43 | "description": "Product Description",
44 | "image": "blue-t-shirt.jpg",
45 | "price": 29,
46 | "category": "Clothing",
47 | "quantity": 25,
48 | "inventoryStatus": "INSTOCK",
49 | "rating": 5
50 | },
51 | {
52 | "id": "1004",
53 | "code": "h456wer53",
54 | "name": "Bracelet",
55 | "description": "Product Description",
56 | "image": "bracelet.jpg",
57 | "price": 15,
58 | "category": "Accessories",
59 | "quantity": 73,
60 | "inventoryStatus": "INSTOCK",
61 | "rating": 4
62 | },
63 | {
64 | "id": "1005",
65 | "code": "av2231fwg",
66 | "name": "Brown Purse",
67 | "description": "Product Description",
68 | "image": "brown-purse.jpg",
69 | "price": 120,
70 | "category": "Accessories",
71 | "quantity": 0,
72 | "inventoryStatus": "OUTOFSTOCK",
73 | "rating": 4
74 | },
75 | {
76 | "id": "1006",
77 | "code": "bib36pfvm",
78 | "name": "Chakra Bracelet",
79 | "description": "Product Description",
80 | "image": "chakra-bracelet.jpg",
81 | "price": 32,
82 | "category": "Accessories",
83 | "quantity": 5,
84 | "inventoryStatus": "LOWSTOCK",
85 | "rating": 3
86 | },
87 | {
88 | "id": "1007",
89 | "code": "mbvjkgip5",
90 | "name": "Galaxy Earrings",
91 | "description": "Product Description",
92 | "image": "galaxy-earrings.jpg",
93 | "price": 34,
94 | "category": "Accessories",
95 | "quantity": 23,
96 | "inventoryStatus": "INSTOCK",
97 | "rating": 5
98 | },
99 | {
100 | "id": "1008",
101 | "code": "vbb124btr",
102 | "name": "Game Controller",
103 | "description": "Product Description",
104 | "image": "game-controller.jpg",
105 | "price": 99,
106 | "category": "Electronics",
107 | "quantity": 2,
108 | "inventoryStatus": "LOWSTOCK",
109 | "rating": 4
110 | },
111 | {
112 | "id": "1009",
113 | "code": "cm230f032",
114 | "name": "Gaming Set",
115 | "description": "Product Description",
116 | "image": "gaming-set.jpg",
117 | "price": 299,
118 | "category": "Electronics",
119 | "quantity": 63,
120 | "inventoryStatus": "INSTOCK",
121 | "rating": 3
122 | },
123 | {
124 | "id": "1010",
125 | "code": "plb34234v",
126 | "name": "Gold Phone Case",
127 | "description": "Product Description",
128 | "image": "gold-phone-case.jpg",
129 | "price": 24,
130 | "category": "Accessories",
131 | "quantity": 0,
132 | "inventoryStatus": "OUTOFSTOCK",
133 | "rating": 4
134 | },
135 | {
136 | "id": "1011",
137 | "code": "4920nnc2d",
138 | "name": "Green Earbuds",
139 | "description": "Product Description",
140 | "image": "green-earbuds.jpg",
141 | "price": 89,
142 | "category": "Electronics",
143 | "quantity": 23,
144 | "inventoryStatus": "INSTOCK",
145 | "rating": 4
146 | },
147 | {
148 | "id": "1012",
149 | "code": "250vm23cc",
150 | "name": "Green T-Shirt",
151 | "description": "Product Description",
152 | "image": "green-t-shirt.jpg",
153 | "price": 49,
154 | "category": "Clothing",
155 | "quantity": 74,
156 | "inventoryStatus": "INSTOCK",
157 | "rating": 5
158 | },
159 | {
160 | "id": "1013",
161 | "code": "fldsmn31b",
162 | "name": "Grey T-Shirt",
163 | "description": "Product Description",
164 | "image": "grey-t-shirt.jpg",
165 | "price": 48,
166 | "category": "Clothing",
167 | "quantity": 0,
168 | "inventoryStatus": "OUTOFSTOCK",
169 | "rating": 3
170 | },
171 | {
172 | "id": "1014",
173 | "code": "waas1x2as",
174 | "name": "Headphones",
175 | "description": "Product Description",
176 | "image": "headphones.jpg",
177 | "price": 175,
178 | "category": "Electronics",
179 | "quantity": 8,
180 | "inventoryStatus": "LOWSTOCK",
181 | "rating": 5
182 | },
183 | {
184 | "id": "1015",
185 | "code": "vb34btbg5",
186 | "name": "Light Green T-Shirt",
187 | "description": "Product Description",
188 | "image": "light-green-t-shirt.jpg",
189 | "price": 49,
190 | "category": "Clothing",
191 | "quantity": 34,
192 | "inventoryStatus": "INSTOCK",
193 | "rating": 4
194 | },
195 | {
196 | "id": "1016",
197 | "code": "k8l6j58jl",
198 | "name": "Lime Band",
199 | "description": "Product Description",
200 | "image": "lime-band.jpg",
201 | "price": 79,
202 | "category": "Fitness",
203 | "quantity": 12,
204 | "inventoryStatus": "INSTOCK",
205 | "rating": 3
206 | },
207 | {
208 | "id": "1017",
209 | "code": "v435nn85n",
210 | "name": "Mini Speakers",
211 | "description": "Product Description",
212 | "image": "mini-speakers.jpg",
213 | "price": 85,
214 | "category": "Clothing",
215 | "quantity": 42,
216 | "inventoryStatus": "INSTOCK",
217 | "rating": 4
218 | },
219 | {
220 | "id": "1018",
221 | "code": "09zx9c0zc",
222 | "name": "Painted Phone Case",
223 | "description": "Product Description",
224 | "image": "painted-phone-case.jpg",
225 | "price": 56,
226 | "category": "Accessories",
227 | "quantity": 41,
228 | "inventoryStatus": "INSTOCK",
229 | "rating": 5
230 | },
231 | {
232 | "id": "1019",
233 | "code": "mnb5mb2m5",
234 | "name": "Pink Band",
235 | "description": "Product Description",
236 | "image": "pink-band.jpg",
237 | "price": 79,
238 | "category": "Fitness",
239 | "quantity": 63,
240 | "inventoryStatus": "INSTOCK",
241 | "rating": 4
242 | },
243 | {
244 | "id": "1020",
245 | "code": "r23fwf2w3",
246 | "name": "Pink Purse",
247 | "description": "Product Description",
248 | "image": "pink-purse.jpg",
249 | "price": 110,
250 | "category": "Accessories",
251 | "quantity": 0,
252 | "inventoryStatus": "OUTOFSTOCK",
253 | "rating": 4
254 | },
255 | {
256 | "id": "1021",
257 | "code": "pxpzczo23",
258 | "name": "Purple Band",
259 | "description": "Product Description",
260 | "image": "purple-band.jpg",
261 | "price": 79,
262 | "category": "Fitness",
263 | "quantity": 6,
264 | "inventoryStatus": "LOWSTOCK",
265 | "rating": 3
266 | },
267 | {
268 | "id": "1022",
269 | "code": "2c42cb5cb",
270 | "name": "Purple Gemstone Necklace",
271 | "description": "Product Description",
272 | "image": "purple-gemstone-necklace.jpg",
273 | "price": 45,
274 | "category": "Accessories",
275 | "quantity": 62,
276 | "inventoryStatus": "INSTOCK",
277 | "rating": 4
278 | },
279 | {
280 | "id": "1023",
281 | "code": "5k43kkk23",
282 | "name": "Purple T-Shirt",
283 | "description": "Product Description",
284 | "image": "purple-t-shirt.jpg",
285 | "price": 49,
286 | "category": "Clothing",
287 | "quantity": 2,
288 | "inventoryStatus": "LOWSTOCK",
289 | "rating": 5
290 | },
291 | {
292 | "id": "1024",
293 | "code": "lm2tny2k4",
294 | "name": "Shoes",
295 | "description": "Product Description",
296 | "image": "shoes.jpg",
297 | "price": 64,
298 | "category": "Clothing",
299 | "quantity": 0,
300 | "inventoryStatus": "INSTOCK",
301 | "rating": 4
302 | },
303 | {
304 | "id": "1025",
305 | "code": "nbm5mv45n",
306 | "name": "Sneakers",
307 | "description": "Product Description",
308 | "image": "sneakers.jpg",
309 | "price": 78,
310 | "category": "Clothing",
311 | "quantity": 52,
312 | "inventoryStatus": "INSTOCK",
313 | "rating": 4
314 | },
315 | {
316 | "id": "1026",
317 | "code": "zx23zc42c",
318 | "name": "Teal T-Shirt",
319 | "description": "Product Description",
320 | "image": "teal-t-shirt.jpg",
321 | "price": 49,
322 | "category": "Clothing",
323 | "quantity": 3,
324 | "inventoryStatus": "LOWSTOCK",
325 | "rating": 3
326 | },
327 | {
328 | "id": "1027",
329 | "code": "acvx872gc",
330 | "name": "Yellow Earbuds",
331 | "description": "Product Description",
332 | "image": "yellow-earbuds.jpg",
333 | "price": 89,
334 | "category": "Electronics",
335 | "quantity": 35,
336 | "inventoryStatus": "INSTOCK",
337 | "rating": 3
338 | },
339 | {
340 | "id": "1028",
341 | "code": "tx125ck42",
342 | "name": "Yoga Mat",
343 | "description": "Product Description",
344 | "image": "yoga-mat.jpg",
345 | "price": 20,
346 | "category": "Fitness",
347 | "quantity": 15,
348 | "inventoryStatus": "INSTOCK",
349 | "rating": 5
350 | },
351 | {
352 | "id": "1029",
353 | "code": "gwuby345v",
354 | "name": "Yoga Set",
355 | "description": "Product Description",
356 | "image": "yoga-set.jpg",
357 | "price": 20,
358 | "category": "Fitness",
359 | "quantity": 25,
360 | "inventoryStatus": "INSTOCK",
361 | "rating": 8
362 | }
363 | ]
364 | }
365 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/favicon.ico
--------------------------------------------------------------------------------
/public/nuxt-logo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/primevue-logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/primevue-logo.webp
--------------------------------------------------------------------------------
/public/vue-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/public/vue-logo.png
--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
1 | @use "assets/sass/main";
2 | @use "assets/sass/form";
3 | @use "assets/sass/sidebar";
4 | @use "assets/sass/markdown";
5 |
6 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
21 |
--------------------------------------------------------------------------------
/src/assets/data/customers-medium.json:
--------------------------------------------------------------------------------
1 | {
2 | "data": [
3 | {
4 | "id": 1000,
5 | "name": "James Butt",
6 | "country": {
7 | "name": "Algeria",
8 | "code": "dz"
9 | },
10 | "company": "Benton, John B Jr",
11 | "date": "2015-09-13",
12 | "status": "unqualified",
13 | "activity": 17,
14 | "representative": {
15 | "name": "Ioni Bowcher",
16 | "image": "ionibowcher.png"
17 | }
18 | },
19 | {
20 | "id": 1001,
21 | "name": "Josephine Darakjy",
22 | "country": {
23 | "name": "Egypt",
24 | "code": "eg"
25 | },
26 | "company": "Chanay, Jeffrey A Esq",
27 | "date": "2019-02-09",
28 | "status": "proposal",
29 | "activity": 0,
30 | "representative": {
31 | "name": "Amy Elsner",
32 | "image": "amyelsner.png"
33 | }
34 | },
35 | {
36 | "id": 1002,
37 | "name": "Art Venere",
38 | "country": {
39 | "name": "Panama",
40 | "code": "pa"
41 | },
42 | "company": "Chemel, James L Cpa",
43 | "date": "2017-05-13",
44 | "status": "qualified",
45 | "activity": 63,
46 | "representative": {
47 | "name": "Asiya Javayant",
48 | "image": "asiyajavayant.png"
49 | }
50 | },
51 | {
52 | "id": 1003,
53 | "name": "Lenna Paprocki",
54 | "country": {
55 | "name": "Slovenia",
56 | "code": "si"
57 | },
58 | "company": "Feltz Printing Service",
59 | "date": "2020-09-15",
60 | "status": "new",
61 | "activity": 37,
62 | "representative": {
63 | "name": "Xuxue Feng",
64 | "image": "xuxuefeng.png"
65 | }
66 | },
67 | {
68 | "id": 1004,
69 | "name": "Donette Foller",
70 | "country": {
71 | "name": "South Africa",
72 | "code": "za"
73 | },
74 | "company": "Printing Dimensions",
75 | "date": "2016-05-20",
76 | "status": "proposal",
77 | "activity": 33,
78 | "representative": {
79 | "name": "Asiya Javayant",
80 | "image": "asiyajavayant.png"
81 | }
82 | },
83 | {
84 | "id": 1005,
85 | "name": "Simona Morasca",
86 | "country": {
87 | "name": "Egypt",
88 | "code": "eg"
89 | },
90 | "company": "Chapman, Ross E Esq",
91 | "date": "2018-02-16",
92 | "status": "qualified",
93 | "activity": 68,
94 | "representative": {
95 | "name": "Ivan Magalhaes",
96 | "image": "ivanmagalhaes.png"
97 | }
98 | },
99 | {
100 | "id": 1006,
101 | "name": "Mitsue Tollner",
102 | "country": {
103 | "name": "Paraguay",
104 | "code": "py"
105 | },
106 | "company": "Morlong Associates",
107 | "date": "2018-02-19",
108 | "status": "renewal",
109 | "activity": 54,
110 | "representative": {
111 | "name": "Ivan Magalhaes",
112 | "image": "ivanmagalhaes.png"
113 | }
114 | },
115 | {
116 | "id": 1007,
117 | "name": "Leota Dilliard",
118 | "country": {
119 | "name": "Serbia",
120 | "code": "rs"
121 | },
122 | "company": "Commercial Press",
123 | "date": "2019-08-13",
124 | "status": "renewal",
125 | "activity": 69,
126 | "representative": {
127 | "name": "Onyama Limba",
128 | "image": "onyamalimba.png"
129 | }
130 | },
131 | {
132 | "id": 1008,
133 | "name": "Sage Wieser",
134 | "country": {
135 | "name": "Egypt",
136 | "code": "eg"
137 | },
138 | "company": "Truhlar And Truhlar Attys",
139 | "date": "2018-11-21",
140 | "status": "unqualified",
141 | "activity": 76,
142 | "representative": {
143 | "name": "Ivan Magalhaes",
144 | "image": "ivanmagalhaes.png"
145 | }
146 | },
147 | {
148 | "id": 1009,
149 | "name": "Kris Marrier",
150 | "country": {
151 | "name": "Mexico",
152 | "code": "mx"
153 | },
154 | "company": "King, Christopher A Esq",
155 | "date": "2015-07-07",
156 | "status": "proposal",
157 | "activity": 3,
158 | "representative": {
159 | "name": "Onyama Limba",
160 | "image": "onyamalimba.png"
161 | }
162 | },
163 | {
164 | "id": 1010,
165 | "name": "Minna Amigon",
166 | "country": {
167 | "name": "Romania",
168 | "code": "ro"
169 | },
170 | "company": "Dorl, James J Esq",
171 | "date": "2018-11-07",
172 | "status": "qualified",
173 | "activity": 38,
174 | "representative": {
175 | "name": "Anna Fali",
176 | "image": "annafali.png"
177 | }
178 | },
179 | {
180 | "id": 1011,
181 | "name": "Abel Maclead",
182 | "country": {
183 | "name": "Singapore",
184 | "code": "sg"
185 | },
186 | "company": "Rangoni Of Florence",
187 | "date": "2017-03-11",
188 | "status": "qualified",
189 | "activity": 87,
190 | "representative": {
191 | "name": "Bernardo Dominic",
192 | "image": "bernardodominic.png"
193 | }
194 | },
195 | {
196 | "id": 1012,
197 | "name": "Kiley Caldarera",
198 | "country": {
199 | "name": "Serbia",
200 | "code": "rs"
201 | },
202 | "company": "Feiner Bros",
203 | "date": "2015-10-20",
204 | "status": "unqualified",
205 | "activity": 80,
206 | "representative": {
207 | "name": "Onyama Limba",
208 | "image": "onyamalimba.png"
209 | }
210 | },
211 | {
212 | "id": 1013,
213 | "name": "Graciela Ruta",
214 | "country": {
215 | "name": "Chile",
216 | "code": "cl"
217 | },
218 | "company": "Buckley Miller \u0026 Wright",
219 | "date": "2016-07-25",
220 | "status": "negotiation",
221 | "activity": 59,
222 | "representative": {
223 | "name": "Amy Elsner",
224 | "image": "amyelsner.png"
225 | }
226 | },
227 | {
228 | "id": 1014,
229 | "name": "Cammy Albares",
230 | "country": {
231 | "name": "Philippines",
232 | "code": "ph"
233 | },
234 | "company": "Rousseaux, Michael Esq",
235 | "date": "2019-06-25",
236 | "status": "new",
237 | "activity": 90,
238 | "representative": {
239 | "name": "Asiya Javayant",
240 | "image": "asiyajavayant.png"
241 | }
242 | },
243 | {
244 | "id": 1015,
245 | "name": "Mattie Poquette",
246 | "country": {
247 | "name": "Venezuela",
248 | "code": "ve"
249 | },
250 | "company": "Century Communications",
251 | "date": "2017-12-12",
252 | "status": "negotiation",
253 | "activity": 52,
254 | "representative": {
255 | "name": "Anna Fali",
256 | "image": "annafali.png"
257 | }
258 | },
259 | {
260 | "id": 1016,
261 | "name": "Meaghan Garufi",
262 | "country": {
263 | "name": "Malaysia",
264 | "code": "my"
265 | },
266 | "company": "Bolton, Wilbur Esq",
267 | "date": "2018-07-04",
268 | "status": "unqualified",
269 | "activity": 31,
270 | "representative": {
271 | "name": "Ivan Magalhaes",
272 | "image": "ivanmagalhaes.png"
273 | }
274 | },
275 | {
276 | "id": 1017,
277 | "name": "Gladys Rim",
278 | "country": {
279 | "name": "Netherlands",
280 | "code": "nl"
281 | },
282 | "company": "T M Byxbee Company Pc",
283 | "date": "2020-02-27",
284 | "status": "renewal",
285 | "activity": 48,
286 | "representative": {
287 | "name": "Stephen Shaw",
288 | "image": "stephenshaw.png"
289 | }
290 | },
291 | {
292 | "id": 1018,
293 | "name": "Yuki Whobrey",
294 | "country": {
295 | "name": "Israel",
296 | "code": "il"
297 | },
298 | "company": "Farmers Insurance Group",
299 | "date": "2017-12-21",
300 | "status": "negotiation",
301 | "activity": 16,
302 | "representative": {
303 | "name": "Bernardo Dominic",
304 | "image": "bernardodominic.png"
305 | }
306 | },
307 | {
308 | "id": 1019,
309 | "name": "Fletcher Flosi",
310 | "country": {
311 | "name": "Argentina",
312 | "code": "ar"
313 | },
314 | "company": "Post Box Services Plus",
315 | "date": "2016-01-04",
316 | "status": "renewal",
317 | "activity": 19,
318 | "representative": {
319 | "name": "Xuxue Feng",
320 | "image": "xuxuefeng.png"
321 | }
322 | },
323 | {
324 | "id": 1020,
325 | "name": "Bette Nicka",
326 | "country": {
327 | "name": "Paraguay",
328 | "code": "py"
329 | },
330 | "company": "Sport En Art",
331 | "date": "2016-10-21",
332 | "status": "renewal",
333 | "activity": 100,
334 | "representative": {
335 | "name": "Onyama Limba",
336 | "image": "onyamalimba.png"
337 | }
338 | },
339 | {
340 | "id": 1021,
341 | "name": "Veronika Inouye",
342 | "country": {
343 | "name": "Ecuador",
344 | "code": "ec"
345 | },
346 | "company": "C 4 Network Inc",
347 | "date": "2017-03-24",
348 | "status": "renewal",
349 | "activity": 72,
350 | "representative": {
351 | "name": "Ioni Bowcher",
352 | "image": "ionibowcher.png"
353 | }
354 | },
355 | {
356 | "id": 1022,
357 | "name": "Willard Kolmetz",
358 | "country": {
359 | "name": "Tunisia",
360 | "code": "tn"
361 | },
362 | "company": "Ingalls, Donald R Esq",
363 | "date": "2017-04-15",
364 | "status": "renewal",
365 | "activity": 94,
366 | "representative": {
367 | "name": "Asiya Javayant",
368 | "image": "asiyajavayant.png"
369 | }
370 | },
371 | {
372 | "id": 1023,
373 | "name": "Maryann Royster",
374 | "country": {
375 | "name": "Belarus",
376 | "code": "by"
377 | },
378 | "company": "Franklin, Peter L Esq",
379 | "date": "2017-03-11",
380 | "status": "qualified",
381 | "activity": 56,
382 | "representative": {
383 | "name": "Elwin Sharvill",
384 | "image": "elwinsharvill.png"
385 | }
386 | },
387 | {
388 | "id": 1024,
389 | "name": "Alisha Slusarski",
390 | "country": {
391 | "name": "Iceland",
392 | "code": "is"
393 | },
394 | "company": "Wtlz Power 107 Fm",
395 | "date": "2018-03-27",
396 | "status": "qualified",
397 | "activity": 7,
398 | "representative": {
399 | "name": "Stephen Shaw",
400 | "image": "stephenshaw.png"
401 | }
402 | },
403 | {
404 | "id": 1025,
405 | "name": "Allene Iturbide",
406 | "country": {
407 | "name": "Italy",
408 | "code": "it"
409 | },
410 | "company": "Ledecky, David Esq",
411 | "date": "2016-02-20",
412 | "status": "qualified",
413 | "activity": 1,
414 | "representative": {
415 | "name": "Ivan Magalhaes",
416 | "image": "ivanmagalhaes.png"
417 | }
418 | },
419 | {
420 | "id": 1026,
421 | "name": "Chanel Caudy",
422 | "country": {
423 | "name": "Argentina",
424 | "code": "ar"
425 | },
426 | "company": "Professional Image Inc",
427 | "date": "2018-06-24",
428 | "status": "new",
429 | "activity": 26,
430 | "representative": {
431 | "name": "Ioni Bowcher",
432 | "image": "ionibowcher.png"
433 | }
434 | },
435 | {
436 | "id": 1027,
437 | "name": "Ezekiel Chui",
438 | "country": {
439 | "name": "Ireland",
440 | "code": "ie"
441 | },
442 | "company": "Sider, Donald C Esq",
443 | "date": "2016-09-24",
444 | "status": "new",
445 | "activity": 76,
446 | "representative": {
447 | "name": "Amy Elsner",
448 | "image": "amyelsner.png"
449 | }
450 | },
451 | {
452 | "id": 1028,
453 | "name": "Willow Kusko",
454 | "country": {
455 | "name": "Romania",
456 | "code": "ro"
457 | },
458 | "company": "U Pull It",
459 | "date": "2020-04-11",
460 | "status": "qualified",
461 | "activity": 7,
462 | "representative": {
463 | "name": "Onyama Limba",
464 | "image": "onyamalimba.png"
465 | }
466 | },
467 | {
468 | "id": 1029,
469 | "name": "Bernardo Figeroa",
470 | "country": {
471 | "name": "Israel",
472 | "code": "il"
473 | },
474 | "company": "Clark, Richard Cpa",
475 | "date": "2018-04-11",
476 | "status": "renewal",
477 | "activity": 81,
478 | "representative": {
479 | "name": "Ioni Bowcher",
480 | "image": "ionibowcher.png"
481 | }
482 | },
483 | {
484 | "id": 1030,
485 | "name": "Ammie Corrio",
486 | "country": {
487 | "name": "Hungary",
488 | "code": "hu"
489 | },
490 | "company": "Moskowitz, Barry S",
491 | "date": "2016-06-11",
492 | "status": "negotiation",
493 | "activity": 56,
494 | "representative": {
495 | "name": "Asiya Javayant",
496 | "image": "asiyajavayant.png"
497 | }
498 | },
499 | {
500 | "id": 1031,
501 | "name": "Francine Vocelka",
502 | "country": {
503 | "name": "Honduras",
504 | "code": "hn"
505 | },
506 | "company": "Cascade Realty Advisors Inc",
507 | "date": "2017-08-02",
508 | "status": "qualified",
509 | "activity": 94,
510 | "representative": {
511 | "name": "Ioni Bowcher",
512 | "image": "ionibowcher.png"
513 | }
514 | },
515 | {
516 | "id": 1032,
517 | "name": "Ernie Stenseth",
518 | "country": {
519 | "name": "Australia",
520 | "code": "au"
521 | },
522 | "company": "Knwz Newsradio",
523 | "date": "2018-06-06",
524 | "status": "renewal",
525 | "activity": 68,
526 | "representative": {
527 | "name": "Xuxue Feng",
528 | "image": "xuxuefeng.png"
529 | }
530 | },
531 | {
532 | "id": 1033,
533 | "name": "Albina Glick",
534 | "country": {
535 | "name": "Ukraine",
536 | "code": "ua"
537 | },
538 | "company": "Giampetro, Anthony D",
539 | "date": "2019-08-08",
540 | "status": "proposal",
541 | "activity": 85,
542 | "representative": {
543 | "name": "Bernardo Dominic",
544 | "image": "bernardodominic.png"
545 | }
546 | },
547 | {
548 | "id": 1034,
549 | "name": "Alishia Sergi",
550 | "country": {
551 | "name": "Qatar",
552 | "code": "qa"
553 | },
554 | "company": "Milford Enterprises Inc",
555 | "date": "2018-05-19",
556 | "status": "negotiation",
557 | "activity": 46,
558 | "representative": {
559 | "name": "Ivan Magalhaes",
560 | "image": "ivanmagalhaes.png"
561 | }
562 | },
563 | {
564 | "id": 1035,
565 | "name": "Solange Shinko",
566 | "country": {
567 | "name": "Cameroon",
568 | "code": "cm"
569 | },
570 | "company": "Mosocco, Ronald A",
571 | "date": "2015-02-12",
572 | "status": "qualified",
573 | "activity": 32,
574 | "representative": {
575 | "name": "Onyama Limba",
576 | "image": "onyamalimba.png"
577 | }
578 | },
579 | {
580 | "id": 1036,
581 | "name": "Jose Stockham",
582 | "country": {
583 | "name": "Italy",
584 | "code": "it"
585 | },
586 | "company": "Tri State Refueler Co",
587 | "date": "2018-04-25",
588 | "status": "qualified",
589 | "activity": 77,
590 | "representative": {
591 | "name": "Amy Elsner",
592 | "image": "amyelsner.png"
593 | }
594 | },
595 | {
596 | "id": 1037,
597 | "name": "Rozella Ostrosky",
598 | "country": {
599 | "name": "Venezuela",
600 | "code": "ve"
601 | },
602 | "company": "Parkway Company",
603 | "date": "2016-02-27",
604 | "status": "unqualified",
605 | "activity": 66,
606 | "representative": {
607 | "name": "Amy Elsner",
608 | "image": "amyelsner.png"
609 | }
610 | },
611 | {
612 | "id": 1038,
613 | "name": "Valentine Gillian",
614 | "country": {
615 | "name": "Paraguay",
616 | "code": "py"
617 | },
618 | "company": "Fbs Business Finance",
619 | "date": "2019-09-17",
620 | "status": "qualified",
621 | "activity": 25,
622 | "representative": {
623 | "name": "Bernardo Dominic",
624 | "image": "bernardodominic.png"
625 | }
626 | },
627 | {
628 | "id": 1039,
629 | "name": "Kati Rulapaugh",
630 | "country": {
631 | "name": "Puerto Rico",
632 | "code": "pr"
633 | },
634 | "company": "Eder Assocs Consltng Engrs Pc",
635 | "date": "2016-12-03",
636 | "status": "renewal",
637 | "activity": 51,
638 | "representative": {
639 | "name": "Ioni Bowcher",
640 | "image": "ionibowcher.png"
641 | }
642 | },
643 | {
644 | "id": 1040,
645 | "name": "Youlanda Schemmer",
646 | "country": {
647 | "name": "Bolivia",
648 | "code": "bo"
649 | },
650 | "company": "Tri M Tool Inc",
651 | "date": "2017-12-15",
652 | "status": "negotiation",
653 | "activity": 49,
654 | "representative": {
655 | "name": "Xuxue Feng",
656 | "image": "xuxuefeng.png"
657 | }
658 | },
659 | {
660 | "id": 1041,
661 | "name": "Dyan Oldroyd",
662 | "country": {
663 | "name": "Argentina",
664 | "code": "ar"
665 | },
666 | "company": "International Eyelets Inc",
667 | "date": "2017-02-02",
668 | "status": "qualified",
669 | "activity": 5,
670 | "representative": {
671 | "name": "Amy Elsner",
672 | "image": "amyelsner.png"
673 | }
674 | },
675 | {
676 | "id": 1042,
677 | "name": "Roxane Campain",
678 | "country": {
679 | "name": "France",
680 | "code": "fr"
681 | },
682 | "company": "Rapid Trading Intl",
683 | "date": "2018-12-25",
684 | "status": "unqualified",
685 | "activity": 100,
686 | "representative": {
687 | "name": "Anna Fali",
688 | "image": "annafali.png"
689 | }
690 | },
691 | {
692 | "id": 1043,
693 | "name": "Lavera Perin",
694 | "country": {
695 | "name": "Vietnam",
696 | "code": "vn"
697 | },
698 | "company": "Abc Enterprises Inc",
699 | "date": "2018-04-10",
700 | "status": "qualified",
701 | "activity": 71,
702 | "representative": {
703 | "name": "Stephen Shaw",
704 | "image": "stephenshaw.png"
705 | }
706 | },
707 | {
708 | "id": 1044,
709 | "name": "Erick Ferencz",
710 | "country": {
711 | "name": "Belgium",
712 | "code": "be"
713 | },
714 | "company": "Cindy Turner Associates",
715 | "date": "2018-05-06",
716 | "status": "unqualified",
717 | "activity": 54,
718 | "representative": {
719 | "name": "Amy Elsner",
720 | "image": "amyelsner.png"
721 | }
722 | },
723 | {
724 | "id": 1045,
725 | "name": "Fatima Saylors",
726 | "country": {
727 | "name": "Canada",
728 | "code": "ca"
729 | },
730 | "company": "Stanton, James D Esq",
731 | "date": "2019-07-10",
732 | "status": "renewal",
733 | "activity": 93,
734 | "representative": {
735 | "name": "Onyama Limba",
736 | "image": "onyamalimba.png"
737 | }
738 | },
739 | {
740 | "id": 1046,
741 | "name": "Jina Briddick",
742 | "country": {
743 | "name": "Mexico",
744 | "code": "mx"
745 | },
746 | "company": "Grace Pastries Inc",
747 | "date": "2018-02-19",
748 | "status": "unqualified",
749 | "activity": 97,
750 | "representative": {
751 | "name": "Xuxue Feng",
752 | "image": "xuxuefeng.png"
753 | }
754 | },
755 | {
756 | "id": 1047,
757 | "name": "Kanisha Waycott",
758 | "country": {
759 | "name": "Ecuador",
760 | "code": "ec"
761 | },
762 | "company": "Schroer, Gene E Esq",
763 | "date": "2019-11-27",
764 | "status": "new",
765 | "activity": 80,
766 | "representative": {
767 | "name": "Xuxue Feng",
768 | "image": "xuxuefeng.png"
769 | }
770 | },
771 | {
772 | "id": 1048,
773 | "name": "Emerson Bowley",
774 | "country": {
775 | "name": "Finland",
776 | "code": "fi"
777 | },
778 | "company": "Knights Inn",
779 | "date": "2018-11-24",
780 | "status": "new",
781 | "activity": 63,
782 | "representative": {
783 | "name": "Stephen Shaw",
784 | "image": "stephenshaw.png"
785 | }
786 | },
787 | {
788 | "id": 1049,
789 | "name": "Blair Malet",
790 | "country": {
791 | "name": "Finland",
792 | "code": "fi"
793 | },
794 | "company": "Bollinger Mach Shp \u0026 Shipyard",
795 | "date": "2018-04-19",
796 | "status": "new",
797 | "activity": 92,
798 | "representative": {
799 | "name": "Asiya Javayant",
800 | "image": "asiyajavayant.png"
801 | }
802 | }
803 | ]
804 | }
805 |
--------------------------------------------------------------------------------
/src/assets/data/products.json:
--------------------------------------------------------------------------------
1 | {
2 | "data": [
3 | {
4 | "id": "1000",
5 | "code": "f230fh0g3",
6 | "name": "Bamboo Watch",
7 | "description": "Product Description",
8 | "image": "bamboo-watch.jpg",
9 | "price": 65,
10 | "category": "Accessories",
11 | "quantity": 24,
12 | "inventoryStatus": "INSTOCK",
13 | "rating": 5
14 | },
15 | {
16 | "id": "1001",
17 | "code": "nvklal433",
18 | "name": "Black Watch",
19 | "description": "Product Description",
20 | "image": "black-watch.jpg",
21 | "price": 72,
22 | "category": "Accessories",
23 | "quantity": 61,
24 | "inventoryStatus": "INSTOCK",
25 | "rating": 4
26 | },
27 | {
28 | "id": "1002",
29 | "code": "zz21cz3c1",
30 | "name": "Blue Band",
31 | "description": "Product Description",
32 | "image": "blue-band.jpg",
33 | "price": 79,
34 | "category": "Fitness",
35 | "quantity": 2,
36 | "inventoryStatus": "LOWSTOCK",
37 | "rating": 3
38 | },
39 | {
40 | "id": "1003",
41 | "code": "244wgerg2",
42 | "name": "Blue T-Shirt",
43 | "description": "Product Description",
44 | "image": "blue-t-shirt.jpg",
45 | "price": 29,
46 | "category": "Clothing",
47 | "quantity": 25,
48 | "inventoryStatus": "INSTOCK",
49 | "rating": 5
50 | },
51 | {
52 | "id": "1004",
53 | "code": "h456wer53",
54 | "name": "Bracelet",
55 | "description": "Product Description",
56 | "image": "bracelet.jpg",
57 | "price": 15,
58 | "category": "Accessories",
59 | "quantity": 73,
60 | "inventoryStatus": "INSTOCK",
61 | "rating": 4
62 | },
63 | {
64 | "id": "1005",
65 | "code": "av2231fwg",
66 | "name": "Brown Purse",
67 | "description": "Product Description",
68 | "image": "brown-purse.jpg",
69 | "price": 120,
70 | "category": "Accessories",
71 | "quantity": 0,
72 | "inventoryStatus": "OUTOFSTOCK",
73 | "rating": 4
74 | },
75 | {
76 | "id": "1006",
77 | "code": "bib36pfvm",
78 | "name": "Chakra Bracelet",
79 | "description": "Product Description",
80 | "image": "chakra-bracelet.jpg",
81 | "price": 32,
82 | "category": "Accessories",
83 | "quantity": 5,
84 | "inventoryStatus": "LOWSTOCK",
85 | "rating": 3
86 | },
87 | {
88 | "id": "1007",
89 | "code": "mbvjkgip5",
90 | "name": "Galaxy Earrings",
91 | "description": "Product Description",
92 | "image": "galaxy-earrings.jpg",
93 | "price": 34,
94 | "category": "Accessories",
95 | "quantity": 23,
96 | "inventoryStatus": "INSTOCK",
97 | "rating": 5
98 | },
99 | {
100 | "id": "1008",
101 | "code": "vbb124btr",
102 | "name": "Game Controller",
103 | "description": "Product Description",
104 | "image": "game-controller.jpg",
105 | "price": 99,
106 | "category": "Electronics",
107 | "quantity": 2,
108 | "inventoryStatus": "LOWSTOCK",
109 | "rating": 4
110 | },
111 | {
112 | "id": "1009",
113 | "code": "cm230f032",
114 | "name": "Gaming Set",
115 | "description": "Product Description",
116 | "image": "gaming-set.jpg",
117 | "price": 299,
118 | "category": "Electronics",
119 | "quantity": 63,
120 | "inventoryStatus": "INSTOCK",
121 | "rating": 3
122 | },
123 | {
124 | "id": "1010",
125 | "code": "plb34234v",
126 | "name": "Gold Phone Case",
127 | "description": "Product Description",
128 | "image": "gold-phone-case.jpg",
129 | "price": 24,
130 | "category": "Accessories",
131 | "quantity": 0,
132 | "inventoryStatus": "OUTOFSTOCK",
133 | "rating": 4
134 | },
135 | {
136 | "id": "1011",
137 | "code": "4920nnc2d",
138 | "name": "Green Earbuds",
139 | "description": "Product Description",
140 | "image": "green-earbuds.jpg",
141 | "price": 89,
142 | "category": "Electronics",
143 | "quantity": 23,
144 | "inventoryStatus": "INSTOCK",
145 | "rating": 4
146 | },
147 | {
148 | "id": "1012",
149 | "code": "250vm23cc",
150 | "name": "Green T-Shirt",
151 | "description": "Product Description",
152 | "image": "green-t-shirt.jpg",
153 | "price": 49,
154 | "category": "Clothing",
155 | "quantity": 74,
156 | "inventoryStatus": "INSTOCK",
157 | "rating": 5
158 | },
159 | {
160 | "id": "1013",
161 | "code": "fldsmn31b",
162 | "name": "Grey T-Shirt",
163 | "description": "Product Description",
164 | "image": "grey-t-shirt.jpg",
165 | "price": 48,
166 | "category": "Clothing",
167 | "quantity": 0,
168 | "inventoryStatus": "OUTOFSTOCK",
169 | "rating": 3
170 | },
171 | {
172 | "id": "1014",
173 | "code": "waas1x2as",
174 | "name": "Headphones",
175 | "description": "Product Description",
176 | "image": "headphones.jpg",
177 | "price": 175,
178 | "category": "Electronics",
179 | "quantity": 8,
180 | "inventoryStatus": "LOWSTOCK",
181 | "rating": 5
182 | },
183 | {
184 | "id": "1015",
185 | "code": "vb34btbg5",
186 | "name": "Light Green T-Shirt",
187 | "description": "Product Description",
188 | "image": "light-green-t-shirt.jpg",
189 | "price": 49,
190 | "category": "Clothing",
191 | "quantity": 34,
192 | "inventoryStatus": "INSTOCK",
193 | "rating": 4
194 | },
195 | {
196 | "id": "1016",
197 | "code": "k8l6j58jl",
198 | "name": "Lime Band",
199 | "description": "Product Description",
200 | "image": "lime-band.jpg",
201 | "price": 79,
202 | "category": "Fitness",
203 | "quantity": 12,
204 | "inventoryStatus": "INSTOCK",
205 | "rating": 3
206 | },
207 | {
208 | "id": "1017",
209 | "code": "v435nn85n",
210 | "name": "Mini Speakers",
211 | "description": "Product Description",
212 | "image": "mini-speakers.jpg",
213 | "price": 85,
214 | "category": "Clothing",
215 | "quantity": 42,
216 | "inventoryStatus": "INSTOCK",
217 | "rating": 4
218 | },
219 | {
220 | "id": "1018",
221 | "code": "09zx9c0zc",
222 | "name": "Painted Phone Case",
223 | "description": "Product Description",
224 | "image": "painted-phone-case.jpg",
225 | "price": 56,
226 | "category": "Accessories",
227 | "quantity": 41,
228 | "inventoryStatus": "INSTOCK",
229 | "rating": 5
230 | },
231 | {
232 | "id": "1019",
233 | "code": "mnb5mb2m5",
234 | "name": "Pink Band",
235 | "description": "Product Description",
236 | "image": "pink-band.jpg",
237 | "price": 79,
238 | "category": "Fitness",
239 | "quantity": 63,
240 | "inventoryStatus": "INSTOCK",
241 | "rating": 4
242 | },
243 | {
244 | "id": "1020",
245 | "code": "r23fwf2w3",
246 | "name": "Pink Purse",
247 | "description": "Product Description",
248 | "image": "pink-purse.jpg",
249 | "price": 110,
250 | "category": "Accessories",
251 | "quantity": 0,
252 | "inventoryStatus": "OUTOFSTOCK",
253 | "rating": 4
254 | },
255 | {
256 | "id": "1021",
257 | "code": "pxpzczo23",
258 | "name": "Purple Band",
259 | "description": "Product Description",
260 | "image": "purple-band.jpg",
261 | "price": 79,
262 | "category": "Fitness",
263 | "quantity": 6,
264 | "inventoryStatus": "LOWSTOCK",
265 | "rating": 3
266 | },
267 | {
268 | "id": "1022",
269 | "code": "2c42cb5cb",
270 | "name": "Purple Gemstone Necklace",
271 | "description": "Product Description",
272 | "image": "purple-gemstone-necklace.jpg",
273 | "price": 45,
274 | "category": "Accessories",
275 | "quantity": 62,
276 | "inventoryStatus": "INSTOCK",
277 | "rating": 4
278 | },
279 | {
280 | "id": "1023",
281 | "code": "5k43kkk23",
282 | "name": "Purple T-Shirt",
283 | "description": "Product Description",
284 | "image": "purple-t-shirt.jpg",
285 | "price": 49,
286 | "category": "Clothing",
287 | "quantity": 2,
288 | "inventoryStatus": "LOWSTOCK",
289 | "rating": 5
290 | },
291 | {
292 | "id": "1024",
293 | "code": "lm2tny2k4",
294 | "name": "Shoes",
295 | "description": "Product Description",
296 | "image": "shoes.jpg",
297 | "price": 64,
298 | "category": "Clothing",
299 | "quantity": 0,
300 | "inventoryStatus": "INSTOCK",
301 | "rating": 4
302 | },
303 | {
304 | "id": "1025",
305 | "code": "nbm5mv45n",
306 | "name": "Sneakers",
307 | "description": "Product Description",
308 | "image": "sneakers.jpg",
309 | "price": 78,
310 | "category": "Clothing",
311 | "quantity": 52,
312 | "inventoryStatus": "INSTOCK",
313 | "rating": 4
314 | },
315 | {
316 | "id": "1026",
317 | "code": "zx23zc42c",
318 | "name": "Teal T-Shirt",
319 | "description": "Product Description",
320 | "image": "teal-t-shirt.jpg",
321 | "price": 49,
322 | "category": "Clothing",
323 | "quantity": 3,
324 | "inventoryStatus": "LOWSTOCK",
325 | "rating": 3
326 | },
327 | {
328 | "id": "1027",
329 | "code": "acvx872gc",
330 | "name": "Yellow Earbuds",
331 | "description": "Product Description",
332 | "image": "yellow-earbuds.jpg",
333 | "price": 89,
334 | "category": "Electronics",
335 | "quantity": 35,
336 | "inventoryStatus": "INSTOCK",
337 | "rating": 3
338 | },
339 | {
340 | "id": "1028",
341 | "code": "tx125ck42",
342 | "name": "Yoga Mat",
343 | "description": "Product Description",
344 | "image": "yoga-mat.jpg",
345 | "price": 20,
346 | "category": "Fitness",
347 | "quantity": 15,
348 | "inventoryStatus": "INSTOCK",
349 | "rating": 5
350 | },
351 | {
352 | "id": "1029",
353 | "code": "gwuby345v",
354 | "name": "Yoga Set",
355 | "description": "Product Description",
356 | "image": "yoga-set.jpg",
357 | "price": 20,
358 | "category": "Fitness",
359 | "quantity": 25,
360 | "inventoryStatus": "INSTOCK",
361 | "rating": 8
362 | }
363 | ]
364 | }
365 |
--------------------------------------------------------------------------------
/src/assets/sass/form.scss:
--------------------------------------------------------------------------------
1 | .p-formkit-data-view {
2 | .formkit-form {
3 | .formkit-outer {
4 | padding-bottom: 0.8rem;
5 | }
6 |
7 | &.form-horizontal {
8 | padding-bottom: 1.2rem;
9 | }
10 |
11 | .formkit-help {
12 | margin: 0;
13 | }
14 | }
15 | }
16 |
17 | .p-formkit-data-debug {
18 | padding-top: 1rem;
19 | }
20 |
--------------------------------------------------------------------------------
/src/assets/sass/main.scss:
--------------------------------------------------------------------------------
1 | $borderRadius: 12px;
2 |
3 | :root {
4 | font-family: Inter;
5 | }
6 |
7 | html {
8 | font-size: 16px;
9 | }
10 |
11 | #workspace {
12 | padding-left: 200px;
13 | a {
14 | text-decoration: none;
15 | color: var(--p-primary-color);
16 | }
17 |
18 | a:hover {
19 | border-bottom: 1px solid var(--p-primary-color);
20 | padding-bottom: 2px;
21 | }
22 | }
23 |
24 | #workspace.collapsed {
25 | padding-left: 60px;
26 | }
27 |
28 | #workspace.onmobile {
29 | padding-left: 60px;
30 | }
31 |
32 | @media (min-width: 1024px) {
33 | .top-navbar {
34 | display: inline-flex !important;
35 | }
36 | }
37 |
38 | .card {
39 | padding: 1rem;
40 | color: var(--p-text-color);
41 | margin-bottom: 1rem;
42 | border-radius: $borderRadius;
43 | box-shadow: 0 3px 5px rgba(0,0,0,.02), 0 0 2px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.08) !important;
44 |
45 | h2 {
46 | color: var(--p-primary-color);
47 | }
48 |
49 | }
50 |
51 |
52 | .p-tiptap {
53 | strong {
54 | color: var(--p-primary-color);
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/assets/sass/markdown.scss:
--------------------------------------------------------------------------------
1 | /* https://github.com/antfu/prism-theme-vars */
2 | @import 'prism-theme-vars/base.css';
3 |
4 | .prose {
5 | --prism-font-family: 'Input Mono', monospace;
6 | }
7 |
8 | html:not(.dark) .prose {
9 | --prism-foreground: #393a34;
10 | --prism-background: #fbfbfb;
11 | --prism-comment: #a0ada0;
12 | --prism-string: #b56959;
13 | --prism-literal: #2f8a89;
14 | --prism-number: #296aa3;
15 | --prism-keyword: #1c6b48;
16 | --prism-function: #6c7834;
17 | --prism-boolean: #1c6b48;
18 | --prism-constant: #a65e2b;
19 | --prism-deleted: #a14f55;
20 | --prism-class: #2993a3;
21 | --prism-builtin: #ab5959;
22 | --prism-property: #b58451;
23 | --prism-namespace: #b05a78;
24 | --prism-punctuation: #8e8f8b;
25 | --prism-decorator: #bd8f8f;
26 | --prism-regex: #ab5e3f;
27 | --prism-json-property: #698c96;
28 | }
29 |
30 | html.dark .prose {
31 | --prism-foreground: #d4cfbf;
32 | --prism-background: #151515;
33 | --prism-comment: #758575;
34 | --prism-string: #d48372;
35 | --prism-literal: #429988;
36 | --prism-keyword: #4d9375;
37 | --prism-boolean: #1c6b48;
38 | --prism-number: #6394bf;
39 | --prism-variable: #c2b36e;
40 | --prism-function: #a1b567;
41 | --prism-deleted: #a14f55;
42 | --prism-class: #54b1bf;
43 | --prism-builtin: #e0a569;
44 | --prism-property: #dd8e6e;
45 | --prism-namespace: #db889a;
46 | --prism-punctuation: #858585;
47 | --prism-decorator: #bd8f8f;
48 | --prism-regex: #ab5e3f;
49 | --prism-json-property: #6b8b9e;
50 | --prism-line-number: #888888;
51 | --prism-line-number-gutter: #eeeeee;
52 | --prism-line-highlight-background: #444444;
53 | --prism-selection-background: #444444;
54 | }
55 |
--------------------------------------------------------------------------------
/src/assets/sass/sidebar.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:color';
2 | @use 'vue-sidebar-menu/src/scss/vue-sidebar-menu.scss' with (
3 | $primary-color: var(--p-primary-color),
4 | $base-bg: #2a2a2e,
5 | $item-color: #fff,
6 | $item-active-color: var(--p-primary-color),
7 | $item-font-size: 14px,
8 | $item-line-height: 18px,
9 | $item-padding: 8px 14px,
10 | $icon-height: 32px,
11 | $icon-width: 32px
12 | );
13 |
14 | .v-sidebar-menu hr {
15 | margin-bottom: 8px;
16 | background-color: rgba(color.adjust(#2a2a2e, $lightness: -5%), 0.5);
17 | border: 0 none;
18 | height: 0.1rem;
19 | }
20 |
--------------------------------------------------------------------------------
/src/auto-import.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /* prettier-ignore */
3 | // @ts-nocheck
4 | // noinspection JSUnusedGlobalSymbols
5 | // Generated by unplugin-auto-import
6 | // biome-ignore lint: disable
7 | export {}
8 | declare global {
9 | const EffectScope: typeof import('vue')['EffectScope']
10 | const computed: typeof import('vue')['computed']
11 | const createApp: typeof import('vue')['createApp']
12 | const customRef: typeof import('vue')['customRef']
13 | const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
14 | const defineComponent: typeof import('vue')['defineComponent']
15 | const effectScope: typeof import('vue')['effectScope']
16 | const getCurrentInstance: typeof import('vue')['getCurrentInstance']
17 | const getCurrentScope: typeof import('vue')['getCurrentScope']
18 | const h: typeof import('vue')['h']
19 | const inject: typeof import('vue')['inject']
20 | const isProxy: typeof import('vue')['isProxy']
21 | const isReactive: typeof import('vue')['isReactive']
22 | const isReadonly: typeof import('vue')['isReadonly']
23 | const isRef: typeof import('vue')['isRef']
24 | const markRaw: typeof import('vue')['markRaw']
25 | const nextTick: typeof import('vue')['nextTick']
26 | const onActivated: typeof import('vue')['onActivated']
27 | const onBeforeMount: typeof import('vue')['onBeforeMount']
28 | const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
29 | const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
30 | const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
31 | const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
32 | const onDeactivated: typeof import('vue')['onDeactivated']
33 | const onErrorCaptured: typeof import('vue')['onErrorCaptured']
34 | const onMounted: typeof import('vue')['onMounted']
35 | const onRenderTracked: typeof import('vue')['onRenderTracked']
36 | const onRenderTriggered: typeof import('vue')['onRenderTriggered']
37 | const onScopeDispose: typeof import('vue')['onScopeDispose']
38 | const onServerPrefetch: typeof import('vue')['onServerPrefetch']
39 | const onUnmounted: typeof import('vue')['onUnmounted']
40 | const onUpdated: typeof import('vue')['onUpdated']
41 | const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
42 | const provide: typeof import('vue')['provide']
43 | const reactive: typeof import('vue')['reactive']
44 | const readonly: typeof import('vue')['readonly']
45 | const ref: typeof import('vue')['ref']
46 | const resolveComponent: typeof import('vue')['resolveComponent']
47 | const shallowReactive: typeof import('vue')['shallowReactive']
48 | const shallowReadonly: typeof import('vue')['shallowReadonly']
49 | const shallowRef: typeof import('vue')['shallowRef']
50 | const toRaw: typeof import('vue')['toRaw']
51 | const toRef: typeof import('vue')['toRef']
52 | const toRefs: typeof import('vue')['toRefs']
53 | const toValue: typeof import('vue')['toValue']
54 | const triggerRef: typeof import('vue')['triggerRef']
55 | const unref: typeof import('vue')['unref']
56 | const useAttrs: typeof import('vue')['useAttrs']
57 | const useCssModule: typeof import('vue')['useCssModule']
58 | const useCssVars: typeof import('vue')['useCssVars']
59 | const useHead: typeof import('@vueuse/head')['useHead']
60 | const useI18n: typeof import('vue-i18n')['useI18n']
61 | const useId: typeof import('vue')['useId']
62 | const useLink: typeof import('vue-router')['useLink']
63 | const useModel: typeof import('vue')['useModel']
64 | const useRoute: typeof import('vue-router')['useRoute']
65 | const useRouter: typeof import('vue-router')['useRouter']
66 | const useSeoMeta: typeof import('@vueuse/head')['useSeoMeta']
67 | const useSlots: typeof import('vue')['useSlots']
68 | const useTemplateRef: typeof import('vue')['useTemplateRef']
69 | const watch: typeof import('vue')['watch']
70 | const watchEffect: typeof import('vue')['watchEffect']
71 | const watchPostEffect: typeof import('vue')['watchPostEffect']
72 | const watchSyncEffect: typeof import('vue')['watchSyncEffect']
73 | }
74 | // for type re-export
75 | declare global {
76 | // @ts-ignore
77 | export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
78 | import('vue')
79 | }
80 |
--------------------------------------------------------------------------------
/src/components.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // @ts-nocheck
3 | // Generated by unplugin-vue-components
4 | // Read more: https://github.com/vuejs/core/pull/3399
5 | // biome-ignore lint: disable
6 | export {}
7 |
8 | /* prettier-ignore */
9 | declare module 'vue' {
10 | export interface GlobalComponents {
11 | AdvertiseBox: typeof import('./components/AdvertiseBox.vue')['default']
12 | AppColorMode: typeof import('./components/app/AppColorMode.vue')['default']
13 | AppFooter: typeof import('./components/app/AppFooter.vue')['default']
14 | AppProfile: typeof import('./components/app/AppProfile.vue')['default']
15 | AppSidebar: typeof import('./components/app/AppSidebar.vue')['default']
16 | AppTopbar: typeof import('./components/app/AppTopbar.vue')['default']
17 | Foo: typeof import('./components/basic/Foo.vue')['default']
18 | Hello: typeof import('./components/basic/Hello.vue')['default']
19 | RouterLink: typeof import('vue-router')['RouterLink']
20 | RouterView: typeof import('vue-router')['RouterView']
21 | TipTap: typeof import('./components/tiptap/TipTap.vue')['default']
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/AdvertiseBox.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | {{ header }}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
26 |
--------------------------------------------------------------------------------
/src/components/app/AppColorMode.vue:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 |
22 |
23 |
31 |
32 |
33 |
34 |
35 |
43 |
--------------------------------------------------------------------------------
/src/components/app/AppFooter.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
10 |
11 |
14 |
--------------------------------------------------------------------------------
/src/components/app/AppProfile.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 |
17 |
18 |
19 | -
20 |
23 |
24 | -
25 |
30 |
31 | -
32 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
44 |
--------------------------------------------------------------------------------
/src/components/app/AppSidebar.vue:
--------------------------------------------------------------------------------
1 |
31 |
32 |
33 |
34 |
43 |
44 |
45 |

46 |

47 |
48 |
49 |

50 |

51 |
52 |
53 |
54 |
55 | PrimeVue Vite Starter {{ version }}
56 | {{ version }}
57 |
58 |
59 |
60 |
65 |
66 |
67 |
68 |
80 |
--------------------------------------------------------------------------------
/src/components/app/AppTopbar.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
19 |
20 |
21 |
24 |
--------------------------------------------------------------------------------
/src/components/basic/Foo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
--------------------------------------------------------------------------------
/src/components/basic/Hello.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 | {{ count }} x {{ times }} = {{ result }}
11 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/components/tiptap/TipTap.vue:
--------------------------------------------------------------------------------
1 |
52 |
53 |
54 |
55 |
56 |
57 |
64 |
71 |
78 |
84 |
85 |
91 |
97 |
103 |
109 |
115 |
121 |
127 |
128 |
129 |
136 |
143 |
150 |
157 |
163 |
164 |
171 |
178 |
185 |
192 |
193 |
194 |
195 |
202 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
252 |
--------------------------------------------------------------------------------
/src/composables/confirmation.ts:
--------------------------------------------------------------------------------
1 | import { useConfirm } from 'primevue/useconfirm'
2 | import { useMessages } from '@/composables/messages'
3 |
4 | export function useConfirmation() {
5 | const confirm = useConfirm()
6 | const { showSuccessMessage, showInfoMessage } = useMessages()
7 |
8 | // eslint-disable-next-line unused-imports/no-unused-vars
9 | function doNothing(id: any) {
10 | }
11 |
12 | function confirmDelete(idToDelete: any, acceptCallback: (id: any) => void, rejectCallback: (id: any) => void = doNothing) {
13 | confirm.require({
14 | message: 'Should this entry be deleted ?',
15 | header: 'Are you sure',
16 | icon: 'pi pi-info-circle',
17 | rejectLabel: 'Cancel',
18 | acceptLabel: 'Delete',
19 | rejectClass: 'p-button-secondary p-button-outlined',
20 | acceptClass: 'p-button-danger',
21 | accept: () => {
22 | showSuccessMessage('Action confirmed', `Entry with ID ${idToDelete} was deleted`)
23 | acceptCallback(idToDelete)
24 | },
25 | reject: () => {
26 | showInfoMessage('Action cancelled', 'No changes are processed')
27 | rejectCallback(idToDelete)
28 | },
29 | })
30 | }
31 |
32 | function confirmAction(acceptCallback: () => void, acceptMessage: string = 'Action confirmed', acceptMessageDetail: string = acceptMessage, header: string = 'Attention', message: string = 'Should proceed with this action ?') {
33 | confirm.require({
34 | message,
35 | header,
36 | icon: 'pi pi-info-circle',
37 | rejectLabel: 'Cancel',
38 | acceptLabel: 'Accept',
39 | rejectClass: 'p-button-secondary p-button-outlined',
40 | acceptClass: 'p-button-success',
41 | accept: () => {
42 | acceptCallback()
43 | showInfoMessage(acceptMessage, acceptMessageDetail)
44 | },
45 | reject: () => {
46 | showInfoMessage('Action cancelled')
47 | },
48 | })
49 | }
50 |
51 | return { confirmDelete, confirmAction }
52 | }
53 |
--------------------------------------------------------------------------------
/src/composables/messages.ts:
--------------------------------------------------------------------------------
1 | import type { ToastMessageOptions } from 'primevue/toast'
2 | import { useToast } from 'primevue/usetoast'
3 |
4 | export enum MessageSeverity {
5 | SUCCESS = 'success',
6 | INFO = 'info',
7 | WARN = 'warn',
8 | ERROR = 'error',
9 | }
10 |
11 | export function useMessages() {
12 | const toast = useToast()
13 |
14 | function showMessage(severity: ToastMessageOptions['severity'], summary: string, detail: string, life: number = 3000) {
15 | toast.add({ severity, summary, detail, life })
16 | }
17 |
18 | function showSuccessMessage(summary: string, detail: string = summary, life: number = 3000) {
19 | showMessage(MessageSeverity.SUCCESS, summary, detail, life)
20 | }
21 |
22 | function showInfoMessage(summary: string, detail: string = summary, life: number = 3000) {
23 | showMessage(MessageSeverity.INFO, summary, detail, life)
24 | }
25 |
26 | function showWarnMessage(summary: string, detail: string = summary, life: number = 3000) {
27 | showMessage(MessageSeverity.WARN, summary, detail, life)
28 | }
29 |
30 | function showErrorMessage(summary: string, detail: string = summary, life: number = 3000) {
31 | showMessage(MessageSeverity.ERROR, summary, detail, life)
32 | }
33 |
34 | return { showSuccessMessage, showInfoMessage, showWarnMessage, showErrorMessage }
35 | }
36 |
--------------------------------------------------------------------------------
/src/composables/navigation.ts:
--------------------------------------------------------------------------------
1 | export function useNavigationMenu() {
2 | const separator = h('hr')
3 |
4 | const menu = computed(() => {
5 | return [
6 | {
7 | href: '/',
8 | title: 'Home',
9 | icon: 'pi pi-fw pi-home',
10 | },
11 | {
12 | component: markRaw(separator),
13 | },
14 | {
15 | title: 'PrimeVue',
16 | icon: 'pi pi-prime',
17 | child: [
18 | { href: '/prime/datatable', title: 'DataTable' },
19 | { href: '/prime/messages', title: 'Messages' },
20 | ],
21 | },
22 | {
23 | title: 'Forms',
24 | icon: 'pi pi-check-square',
25 | child: [
26 | { href: '/form', title: 'Basic' },
27 | { href: '/form/toggle', title: 'Edit / View' },
28 | ],
29 | },
30 | {
31 | title: 'UI',
32 | icon: 'pi pi-image',
33 | child: [
34 | { href: '/ui/uno', title: 'UnoCSS' },
35 | { href: '/ui/icons', title: 'Icons' },
36 | { href: '/ui/tiptap', title: 'TipTap' },
37 | ],
38 | },
39 | {
40 | title: 'Data',
41 | icon: 'pi pi-server',
42 | child: [
43 | { href: '/data/stores', title: 'Stores' },
44 | ],
45 | },
46 | {
47 | title: 'Markdown',
48 | icon: 'pi pi-book',
49 | href: '/markdown',
50 | },
51 | {
52 | title: 'Admin',
53 | icon: 'pi pi-key',
54 | href: '/admin',
55 | },
56 |
57 | ]
58 | })
59 |
60 | return { menu }
61 | }
62 |
--------------------------------------------------------------------------------
/src/composables/primeDataTable.ts:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 |
3 | export function usePrimeDataTable() {
4 | const tableData = ref([])
5 |
6 | const filters = ref({})
7 | const dataTableRef = ref()
8 |
9 | function exportCSV() {
10 | dataTableRef.value?.exportCSV()
11 | }
12 |
13 | return {
14 | tableData,
15 | filters,
16 | dataTableRef,
17 | exportCSV,
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/composables/primevue/useDataTable.ts:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 |
3 | export default () => {
4 | // @ts-expect-error Need Error Masking
5 | const tableData: Ref = ref([])
6 | const filters = ref({})
7 | const dataTableRef = ref(null)
8 |
9 | function exportCSV() {
10 | // @ts-expect-error Need Error Masking
11 | dataTableRef.value.exportCSV()
12 | }
13 |
14 | return {
15 | tableData,
16 | filters,
17 | dataTableRef,
18 | exportCSV,
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | interface ImportMetaEnv {
2 | VITE_APP_VERSION: string
3 | VITE_APP_BUILD_EPOCH: number
4 | }
5 |
--------------------------------------------------------------------------------
/src/i18n/locales/de.json:
--------------------------------------------------------------------------------
1 | {
2 | "welcome": "Willkommen",
3 | "save": "Speichern",
4 | "search": "Suchen",
5 | "lang": {
6 | "en": "Englisch",
7 | "de": "Deutsch"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/i18n/locales/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "welcome": "Welcome",
3 | "save": "Save",
4 | "search": "Search",
5 | "lang": {
6 | "en": "English",
7 | "de": "German"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/layouts/404.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/layouts/default.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
17 |
18 |
19 |
22 |
--------------------------------------------------------------------------------
/src/layouts/error.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/logic/dark.ts:
--------------------------------------------------------------------------------
1 | import { useDark, useToggle } from '@vueuse/core'
2 |
3 | export const isDark = useDark()
4 | export const toggleDark = useToggle(isDark)
5 |
--------------------------------------------------------------------------------
/src/logic/index.ts:
--------------------------------------------------------------------------------
1 | export * from './dark'
2 | export * from './navigation'
3 |
--------------------------------------------------------------------------------
/src/logic/navigation.ts:
--------------------------------------------------------------------------------
1 | export const navigationMenu = [
2 | {
3 | label: 'Home',
4 | items: [{
5 | label: 'Dashboard',
6 | icon: 'pi pi-fw pi-home',
7 | to: '/',
8 | }],
9 | },
10 | {
11 | label: 'PrimeVue',
12 | icon: 'pi pi-fw pi-clone',
13 | items: [
14 | { label: 'Table', icon: 'pi pi-fw pi-user-edit', to: '/elements/table' },
15 | { label: 'Validation', icon: 'pi pi-fw pi-user-edit', to: '/elements/validation' },
16 | ],
17 | },
18 | {
19 | label: 'UI / UX',
20 | icon: 'pi pi-fw pi-clone',
21 | items: [
22 | { label: 'UnoCSS', icon: 'pi pi-fw pi-box', to: '/ui/uno' },
23 | { label: 'Tailwind (UnoCSS)', icon: 'pi pi-fw pi-box', to: '/ui/tailwind' },
24 | { label: 'Icons', icon: 'pi pi-fw pi-calendar', to: '/ui/icons' },
25 | ],
26 | },
27 | {
28 | label: 'Pinia Store',
29 | items: [
30 | { label: 'Store Settings', icon: 'pi pi-fw pi-th-large', to: '/store/store' },
31 | ],
32 | },
33 | {
34 | label: 'Markdown',
35 | items: [{
36 | label: 'Sample Page',
37 | icon: 'pi pi-fw pi-star',
38 | to: '/markdown/hello',
39 | }],
40 | },
41 | {
42 | label: 'Admin',
43 | items: [{
44 | label: 'Admin Page',
45 | icon: 'pi pi-fw pi-sign-in',
46 | to: '/admin',
47 | }],
48 | },
49 | ]
50 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import type { UserModule } from '@/types'
2 | import { setupLayouts } from 'virtual:generated-layouts'
3 | import generatedRoutes from 'virtual:generated-pages'
4 | // register vue composition api globally
5 | import { ViteSSG } from 'vite-ssg'
6 | import App from './App.vue'
7 | import 'uno.css'
8 | import '@sfxcode/formkit-primevue/dist/sass/formkit-primevue.scss'
9 |
10 | const routes = setupLayouts(generatedRoutes)
11 |
12 | export const createApp = ViteSSG(
13 | App,
14 | { routes },
15 | (ctx) => {
16 | // install all modules under `modules/`
17 | Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
18 | .forEach(i => i.install?.(ctx))
19 | },
20 |
21 | )
22 |
--------------------------------------------------------------------------------
/src/modules/formkit.ts:
--------------------------------------------------------------------------------
1 | import type { UserModule } from '@/types'
2 | import { createAutoAnimatePlugin } from '@formkit/addons'
3 |
4 | import { de, en } from '@formkit/i18n'
5 | import { defaultConfig, plugin } from '@formkit/vue'
6 | import { FormKitDataEdit, FormKitDataView, primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
7 | import { addPrimeAsteriskPlugin } from '@sfxcode/formkit-primevue/plugins'
8 |
9 | export const install: UserModule = ({ app }) => {
10 | app.component('FormKitDataEdit', FormKitDataEdit)
11 | app.component('FormKitDataView', FormKitDataView)
12 |
13 | app.use(plugin, defaultConfig({
14 | locales: { de, en },
15 | // Define the active locale
16 | locale: 'en',
17 | inputs: { ...primeInputs, ...primeOutputs },
18 | plugins: [
19 | createAutoAnimatePlugin(
20 | {
21 | /* optional AutoAnimate config */
22 | // default:
23 | duration: 250,
24 | easing: 'ease-in-out',
25 | },
26 | {
27 | /* optional animation targets object */
28 | // default:
29 | global: ['outer', 'inner'],
30 | form: ['form'],
31 | repeater: ['items'],
32 | },
33 | ),
34 | addPrimeAsteriskPlugin,
35 | ],
36 | }))
37 | }
38 |
--------------------------------------------------------------------------------
/src/modules/i18n.ts:
--------------------------------------------------------------------------------
1 | import type { UserModule } from '@/types'
2 | import messages from '@intlify/unplugin-vue-i18n/messages'
3 | import { createI18n } from 'vue-i18n'
4 |
5 | export const install: UserModule = ({ app }) => {
6 | const i18n = createI18n({
7 | locale: 'en',
8 | messages,
9 | numberFormats: {
10 | en: {
11 | decimal: {
12 | style: 'decimal',
13 | minimumFractionDigits: 2,
14 | maximumFractionDigits: 2,
15 | },
16 | short: {
17 | style: 'decimal',
18 | minimumFractionDigits: 0,
19 | maximumFractionDigits: 0,
20 | },
21 | percent: {
22 | style: 'percent',
23 | minimumFractionDigits: 2,
24 | useGrouping: false,
25 | },
26 | currency: {
27 | style: 'currency',
28 | minimumFractionDigits: 2,
29 | maximumFractionDigits: 2,
30 | currency: 'USD',
31 | },
32 | },
33 | de: {
34 | decimal: {
35 | style: 'decimal',
36 | minimumFractionDigits: 2,
37 | maximumFractionDigits: 2,
38 | },
39 | short: {
40 | style: 'decimal',
41 | minimumFractionDigits: 0,
42 | maximumFractionDigits: 0,
43 | },
44 | percent: {
45 | style: 'percent',
46 | minimumFractionDigits: 2,
47 | useGrouping: false,
48 | },
49 | currency: {
50 | style: 'currency',
51 | minimumFractionDigits: 2,
52 | maximumFractionDigits: 2,
53 | currency: 'EUR',
54 | },
55 | },
56 | },
57 | datetimeFormats: {
58 | en: {
59 | short: {
60 | year: 'numeric',
61 | month: '2-digit',
62 | day: '2-digit',
63 | },
64 | rangeYear: {
65 | year: 'numeric',
66 | },
67 | rangeMonth: {
68 | month: '2-digit',
69 | },
70 | rangeDay: {
71 | day: '2-digit',
72 | },
73 | long: {
74 | day: '2-digit',
75 | month: '2-digit',
76 | year: 'numeric',
77 | hour: '2-digit',
78 | minute: '2-digit',
79 | },
80 | },
81 | de: {
82 | short: {
83 | day: '2-digit',
84 | month: '2-digit',
85 | year: 'numeric',
86 | },
87 | long: {
88 | day: '2-digit',
89 | month: '2-digit',
90 | year: 'numeric',
91 | hour: '2-digit',
92 | minute: '2-digit',
93 | },
94 | rangeYear: {
95 | year: 'numeric',
96 | },
97 | rangeMonth: {
98 | month: '2-digit',
99 | },
100 | rangeDay: {
101 | day: '2-digit',
102 | },
103 | },
104 | },
105 | })
106 |
107 | app.use(i18n)
108 | }
109 |
--------------------------------------------------------------------------------
/src/modules/pinia.ts:
--------------------------------------------------------------------------------
1 | import type { UserModule } from '@/types'
2 | import { createPinia } from 'pinia'
3 | import { useAuthStore } from '@/store'
4 |
5 | // Setup Pinia
6 | // https://pinia.esm.dev/
7 | export const install: UserModule = ({ isClient, initialState, app, router }) => {
8 | const pinia = createPinia()
9 | app.use(pinia)
10 | // Refer to
11 | // https://github.com/antfu/vite-ssg/blob/main/README.md#state-serialization
12 | // for other serialization strategies.
13 | if (isClient)
14 | pinia.state.value = (initialState.pinia) || {}
15 |
16 | else
17 | initialState.pinia = pinia.state.value
18 |
19 | // enable athentification
20 | const auth = useAuthStore()
21 | router.beforeEach((to, from, next) => {
22 | const path: string = to.path
23 | if (path === '/logout') {
24 | auth.logout()
25 | router.push('/')
26 | }
27 | else if (path.includes('/admin')) {
28 | if (auth.authentificated)
29 | next()
30 | else
31 | router.push('/login')
32 | }
33 | else {
34 | next()
35 | }
36 | })
37 | }
38 |
--------------------------------------------------------------------------------
/src/modules/primevue.ts:
--------------------------------------------------------------------------------
1 | import type { UserModule } from '@/types'
2 | import Aura from '@primevue/themes/aura'
3 | import { usePrimeInputs } from '@sfxcode/formkit-primevue'
4 | import Column from 'primevue/column'
5 | import PrimeVue from 'primevue/config'
6 | import ConfirmationService from 'primevue/confirmationservice'
7 | import ConfirmDialog from 'primevue/confirmdialog'
8 | import DataTable from 'primevue/datatable'
9 | import IconField from 'primevue/iconfield'
10 | import InputIcon from 'primevue/inputicon'
11 | import MegaMenu from 'primevue/megamenu'
12 | import OverlayPanel from 'primevue/overlaypanel'
13 |
14 | import Ripple from 'primevue/ripple'
15 |
16 | import Tab from 'primevue/tab'
17 | import TabList from 'primevue/tablist'
18 | import TabPanel from 'primevue/tabpanel'
19 | import TabPanels from 'primevue/tabpanels'
20 | import Tabs from 'primevue/tabs'
21 | import Toast from 'primevue/toast'
22 |
23 | // services
24 |
25 | import ToastService from 'primevue/toastservice'
26 | import Toolbar from 'primevue/toolbar'
27 | import Tooltip from 'primevue/tooltip'
28 | import 'primeicons/primeicons.css'
29 |
30 | export const install: UserModule = ({ app }) => {
31 | // directives
32 | app.directive('ripple', Ripple)
33 | app.directive('tooltip', Tooltip)
34 |
35 | // input components
36 | const { registerInputs } = usePrimeInputs()
37 | registerInputs(app)
38 |
39 | // other components
40 | app.component('MegaMenu', MegaMenu)
41 | app.component('Tab', Tab)
42 | app.component('Tabs', Tabs)
43 | app.component('TabList', TabList)
44 | app.component('TabPanels', TabPanels)
45 | app.component('TabPanel', TabPanel)
46 | app.component('Toast', Toast)
47 | app.component('Toolbar', Toolbar)
48 | app.component('ConfirmDialog', ConfirmDialog)
49 | app.component('OverlayPanel', OverlayPanel)
50 | app.component('Column', Column)
51 | app.component('DataTable', DataTable)
52 | app.component('IconField', IconField)
53 | app.component('InputIcon', InputIcon)
54 |
55 | app.use(PrimeVue, {
56 | theme: {
57 | preset: Aura,
58 | options: {
59 | darkModeSelector: '.dark',
60 | },
61 | },
62 | ripple: false,
63 | })
64 |
65 | // services
66 | app.use(ConfirmationService)
67 | app.use(ToastService)
68 | }
69 |
--------------------------------------------------------------------------------
/src/modules/sidebar.ts:
--------------------------------------------------------------------------------
1 | import type { UserModule } from '@/types'
2 | import VueSidebarMenu from 'vue-sidebar-menu'
3 |
4 | export const install: UserModule = ({ app }) => {
5 | app.use(VueSidebarMenu)
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/Error.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Oops. Something went wrong ! !
7 |
8 |
9 |
10 | meta:
11 | layout: error
12 |
13 |
--------------------------------------------------------------------------------
/src/pages/[...all].vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | {{ t('not_found') }}
8 |
9 |
10 |
11 |
12 | meta:
13 | layout: 404
14 |
15 |
--------------------------------------------------------------------------------
/src/pages/admin/index.vue:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
16 |
17 |
Restricted Admin Area
18 |
Some restricted content ....
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/pages/data/i18n.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
Localization
10 | Switch Locale to
11 |
12 |
17 |
18 |
{{ t('save') }}
19 |
{{ d(testDate, 'shortshort') }}
20 |
{{ n(testNumber, 'currency') }}
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/pages/data/stores.vue:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 |
Store Settings
16 |
17 | Primevue Theme Store
18 |
19 |
20 |
Theme Name
21 |
{{ themeStore.themeName }}
22 |
Theme Color
23 |
{{ themeStore.themeColor }}
24 |
25 |
26 |
27 | Data Store (Option Store)
28 |
29 |
Example of a Data Store
30 |
31 |
Products
32 |
{{ dataStore.products.length }}
33 |
34 |
35 |
36 | Counter Store (Setup Store)
37 |
38 |
Example of a Data Store
39 |
44 |
45 | {{ counterStore.name }} clicked {{ counterStore.count }} times. Doubled value: {{ counterStore.doubleCount }}
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
58 |
--------------------------------------------------------------------------------
/src/pages/form/index.vue:
--------------------------------------------------------------------------------
1 |
125 |
126 |
127 |
128 |
129 |
Basic Demo
130 |
131 |
132 |
138 |
139 |
140 |
149 |
150 |
151 |
152 |
154 |
--------------------------------------------------------------------------------
/src/pages/form/toggle.vue:
--------------------------------------------------------------------------------
1 |
113 |
114 |
115 |
116 |
117 |
Data Edit
118 |
119 | Edit Mode
120 | Horizontal
121 |
122 |
123 |
132 |
137 |
138 |
139 |
140 |
141 |
--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 | PrimeVue
9 | & TypeScript
10 | & Vite
11 |
12 |
13 | Starter for Vue.js Development.
14 |
15 |
16 |
17 | Composition Api
18 |
19 |
20 | Reduce a lot of boilerplate code
21 |
22 |
23 | Replacement / Alternative for VUEX Store
24 |
25 |
26 | Vite Plugins like ViteIcons, PurgeIcons, ... and Vitest
27 |
28 |
29 | Routing by File/Folder & Vite Markdown included
30 |
31 |
32 | Layouts like nuxt layout templates
33 |
34 |
35 | Typesafe by default
36 |
37 |
38 |
39 | Excellent Component Library for VUE
40 |
41 |
42 | Free Sakai theme (PrimeIcons 2 included)
43 |
44 |
45 | The instant on-demand Atomic CSS engine
46 |
47 |
48 | Formkit PrimeVue Example included
49 |
50 |
51 | VueUse Head included
52 |
53 |
54 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/src/pages/login.vue:
--------------------------------------------------------------------------------
1 |
46 |
47 |
48 |
49 |
50 |
51 |

52 |
53 |
61 |
62 |
63 |
64 | {{ errorMessage }}
65 |
66 |
67 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/src/pages/markdown/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: My Cool App
3 | ---
4 |
5 | # Hello Markdown
6 |
7 | This is {{frontmatter.name}}
8 |
9 | [vite-primevue-starter](https://github.com/sfxcode/vite-primevue-starter)
10 |
11 | * Part 1
12 | * Part 2
13 | * Part 3
14 |
15 |
16 |
HTML
17 | Some HTML Code ...
18 |
19 |
20 | ## Source Code
21 |
22 | ```markdown
23 | ---
24 | name: My Cool App
25 | ---
26 |
27 | # Hello Markdown
28 |
29 | This is {{frontmatter.name}}
30 |
31 | [vite-primevue-starter](https://github.com/sfxcode/vite-primevue-starter)
32 |
33 | * Part 1
34 | * Part 2
35 | * Part 3
36 |
37 |
38 |
HTML
39 | Some HTML Code ...
40 |
41 | ```
42 |
--------------------------------------------------------------------------------
/src/pages/prime/datatable.vue:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 |
25 |
DataTable Example
26 |
39 |
40 |
49 |
50 |
51 | No Data Found.
52 |
53 |
54 |
55 |
56 |
57 |
58 | {{ tableData ? tableData.length : 0 }} Customers found
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/src/pages/prime/messages.vue:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 |
22 |
PrimeVue Toast Demo
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
Confirmation
38 |
39 |
40 |
41 |
42 |
Messages
43 |
44 |
45 | Success Message Content
46 |
47 |
48 | Info Message Content
49 |
50 |
51 | Warning Message Content
52 |
53 |
54 | Error Message Content
55 |
56 |
57 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/src/pages/store/Store.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
Store Settings
12 |
13 | Primevue Theme Store
14 |
15 |
16 |
Theme Name
17 |
{{ themeStore.themeName }}
18 |
Theme Color
19 |
{{ themeStore.themeColor }}
20 |
21 |
22 |
23 | Data Store (Option Store)
24 |
25 |
Example of a Data Store
26 |
27 |
Products
28 |
{{ dataStore.products.length }}
29 |
30 |
31 |
32 | Counter Store (Setup Store)
33 |
34 |
Example of a Data Store
35 |
40 |
41 | {{ counterStore.name }} clicked {{ counterStore.count }} times. Doubled value: {{ counterStore.doubleCount }}
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
54 |
--------------------------------------------------------------------------------
/src/pages/templates/Blueprint.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Blueprint
7 | Use this page to start from scratch and place your custom content !
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/pages/ui/icons.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
Icons by UnoCSS
8 |
9 |
Iconset: MDI
10 |
15 |
Iconset: TWEMOJI
16 |
21 |
Iconset: Prime
22 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/pages/ui/tiptap.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
TipTap as alternative Editor
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
{{ editorValue }}
22 |
23 |
24 |
25 |
26 |
29 |
--------------------------------------------------------------------------------
/src/pages/ui/uno.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
UnoCSS
8 |
9 |
10 |
11 | unocss
12 |
13 |
14 | The instant on-demand Atomic CSS engine.
15 |
16 |
24 |
25 |
26 |
27 | on-demand · instant · fully customizable
28 |
29 |
30 |
31 |
32 | Inspector
33 |
34 |
35 | Only visible in Development mode - click info icon below
36 |
37 |
38 |
39 |
40 |
41 | View, play and analyse rules and setup ...
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare interface Window {
2 | // extend the window
3 | }
4 |
5 | declare module '*.vue' {
6 | import type { DefineComponent } from 'vue'
7 |
8 | const component: DefineComponent<{}, {}, any>
9 | export default component
10 | }
11 |
12 | declare module '*.md' {
13 |
14 | import type { DefineComponent } from 'vue'
15 |
16 | const component: DefineComponent<{}, {}, any>
17 | export default Component
18 | }
19 |
--------------------------------------------------------------------------------
/src/store/auth.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia'
2 |
3 | // main is the name of the store. It is unique across your application
4 | // and will appear in devtools
5 | export const useAuthStore = defineStore('auth', {
6 | // a function that returns a fresh state
7 | state: () => ({
8 | authentificated: false,
9 | email: 'admin@test.com',
10 | }),
11 | // optional getters
12 | getters: {},
13 | // optional actions
14 | actions: {
15 | login(password: string) {
16 | // `this` is the store instance
17 | this.authentificated = this.email === 'admin@test.com' && password === '1234'
18 | },
19 | logout() {
20 | this.authentificated = false
21 | },
22 | },
23 | })
24 |
--------------------------------------------------------------------------------
/src/store/counter.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia'
2 |
3 | export const useCounterStore = defineStore('counter', () => {
4 | const count = ref(0)
5 | const name = ref('sfxcode')
6 | const doubleCount = computed(() => count.value * 2)
7 | function increment() {
8 | count.value++
9 | }
10 |
11 | watch(name, () => {
12 | count.value = 0
13 | })
14 |
15 | return { count, name, doubleCount, increment }
16 | })
17 |
--------------------------------------------------------------------------------
/src/store/data.ts:
--------------------------------------------------------------------------------
1 | import { consola } from 'consola'
2 | import { acceptHMRUpdate, defineStore } from 'pinia'
3 |
4 | const version = ref(import.meta.env.VITE_APP_VERSION)
5 |
6 | export const useDataStore = defineStore('data', {
7 | state: () => ({
8 | appVersion: version,
9 | products: [],
10 | }),
11 | actions: {
12 | async initData() {
13 | if (this.products.length === 0) {
14 | consola.debug('fetching data ...')
15 | await fetch('/data/customers-medium.json').then(res => res.json()).then((d) => {
16 | this.products = d.data
17 | }).catch(error => consola.error(error))
18 | }
19 | },
20 | },
21 |
22 | })
23 |
24 | if (import.meta.hot)
25 | import.meta.hot.accept(acceptHMRUpdate(useDataStore, import.meta.hot))
26 |
--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
1 | export { useAuthStore } from './auth'
2 | export { useCounterStore } from './counter'
3 | export { useDataStore } from './data'
4 | export { useThemeStore } from './theme'
5 |
--------------------------------------------------------------------------------
/src/store/state.ts:
--------------------------------------------------------------------------------
1 | import { reactive } from 'vue'
2 |
3 | export const stateStore = reactive({
4 | collapsed: false,
5 | isOnMobile: false,
6 |
7 | setCollapsed(value: boolean) {
8 | this.collapsed = value
9 | },
10 |
11 | setIsOnMobile(value: boolean) {
12 | this.isOnMobile = value
13 | },
14 | })
15 |
--------------------------------------------------------------------------------
/src/store/theme.ts:
--------------------------------------------------------------------------------
1 | import { acceptHMRUpdate, defineStore } from 'pinia'
2 |
3 | export function updateTheme(themeName: string, themeColor: string) {
4 | return `/themes/${themeName}-${themeColor}/theme.css`
5 | }
6 |
7 | export const useThemeStore = defineStore('theme', {
8 | // a function that returns a fresh state
9 | state: () => ({
10 | themeName: 'aura',
11 | themeColor: 'green',
12 | }),
13 | // optional getters
14 | getters: {
15 | theme: (state) => {
16 | return `${state.themeName}-${state.themeColor}`
17 | },
18 | },
19 | // optional actions
20 | actions: {
21 | setTheme(themeName: string) {
22 | this.themeName = themeName
23 | },
24 | setColor(colorName: string) {
25 | this.themeColor = colorName
26 | },
27 | },
28 | })
29 |
30 | if (import.meta.hot)
31 | import.meta.hot.accept(acceptHMRUpdate(useThemeStore, import.meta.hot))
32 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | import type { ViteSSGContext } from 'vite-ssg'
2 |
3 | export type UserModule = (ctx: ViteSSGContext) => void
4 |
--------------------------------------------------------------------------------
/test/components/app/app_footer.test.ts:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import { expect, test } from 'vitest'
3 |
4 | import AppFooter from '../../../src/components/app/AppFooter.vue'
5 |
6 | test('mount component', async () => {
7 | expect(AppFooter).toBeTruthy()
8 |
9 | const wrapper = mount(AppFooter, {})
10 |
11 | expect(wrapper.text()).toContain('Vite PrimeVue Starter')
12 | })
13 |
--------------------------------------------------------------------------------
/test/components/basic/basic.test.ts:
--------------------------------------------------------------------------------
1 | import { assert, expect, test } from 'vitest'
2 |
3 | // Edit an assertion and save to see HMR in action
4 |
5 | test('Math.sqrt()', () => {
6 | expect(Math.sqrt(4)).toBe(2)
7 | expect(Math.sqrt(144)).toBe(12)
8 | expect(Math.sqrt(2)).toBe(Math.SQRT2)
9 | })
10 |
11 | test('JSON', () => {
12 | const input = {
13 | foo: 'hello',
14 | bar: 'world',
15 | }
16 |
17 | const output = JSON.stringify(input)
18 |
19 | expect(output).eq('{"foo":"hello","bar":"world"}')
20 | assert.deepEqual(JSON.parse(output), input, 'matches original')
21 | })
22 |
--------------------------------------------------------------------------------
/test/sample/basic.test.ts:
--------------------------------------------------------------------------------
1 | import { assert, expect, test } from 'vitest'
2 |
3 | // Edit an assertion and save to see HMR in action
4 |
5 | test('Math.sqrt()', () => {
6 | expect(Math.sqrt(4)).toBe(2)
7 | expect(Math.sqrt(144)).toBe(12)
8 | expect(Math.sqrt(2)).toBe(Math.SQRT2)
9 | })
10 |
11 | test('JSON', () => {
12 | const input = {
13 | foo: 'hello',
14 | bar: 'world',
15 | }
16 |
17 | const output = JSON.stringify(input)
18 |
19 | expect(output).eq('{"foo":"hello","bar":"world"}')
20 | assert.deepEqual(JSON.parse(output), input, 'matches original')
21 | })
22 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "module": "ESNext",
5 | "target": "es2016",
6 | "moduleResolution": "node",
7 | "lib": ["es5" ,"DOM", "ESNext"],
8 | "strict": true,
9 | "esModuleInterop": true,
10 | "incremental": false,
11 | "skipLibCheck": true,
12 | "resolveJsonModule": true,
13 | "noUnusedLocals": true,
14 | "strictNullChecks": true,
15 | "allowSyntheticDefaultImports": true,
16 | "importHelpers": true,
17 | "forceConsistentCasingInFileNames": true,
18 | "types": [
19 | "vite/client",
20 | "vite-plugin-pages/client",
21 | "vite-plugin-vue-layouts/client",
22 | "@intlify/vite-plugin-vue-i18n/client",
23 | "vitest",
24 | "vitest/global",
25 |
26 | ],
27 | "paths": {
28 | "@/*": ["./src/*"],
29 | "tslib" : ["./node_modules/tslib/tslib.d.ts"]
30 | }
31 |
32 | },
33 | "include": [
34 | "src/**/*.ts",
35 | "src/**/*.d.ts",
36 | "src/**/*.tsx",
37 | "src/**/*.vue",
38 | "auto-imports.d.ts",
39 | "components.d.ts"
40 | ],
41 | "exclude": ["dist", "node_modules"]
42 | }
43 |
--------------------------------------------------------------------------------
/unocss.config.ts:
--------------------------------------------------------------------------------
1 | import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
2 | // uno.config.ts
3 | import {
4 | defineConfig,
5 | presetAttributify,
6 | presetIcons,
7 | presetTypography,
8 | presetWebFonts,
9 | presetWind4,
10 | transformerDirectives,
11 | transformerVariantGroup,
12 | } from 'unocss'
13 |
14 | function convert(color: string) {
15 | return `color-mix(in srgb, ${color} calc(100% * ), transparent)`
16 | }
17 |
18 | export default defineConfig({
19 | shortcuts: [
20 | ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
21 | ],
22 | theme: {
23 | colors: {
24 | 'primary': convert('var(--p-primary-color)'),
25 | 'primary-emphasis': convert('var(--p-primary-hover-color)'),
26 | 'primary-emphasis-alt': convert('var(--p-primary-active-color)'),
27 | 'primary-contrast': convert('var(--p-primary-contrast-color)'),
28 | 'primary-50': convert('var(--p-primary-50)'),
29 | 'primary-100': convert('var(--p-primary-100)'),
30 | 'primary-200': convert('var(--p-primary-200)'),
31 | 'primary-300': convert('var(--p-primary-300)'),
32 | 'primary-400': convert('var(--p-primary-400)'),
33 | 'primary-500': convert('var(--p-primary-500)'),
34 | 'primary-600': convert('var(--p-primary-600)'),
35 | 'primary-700': convert('var(--p-primary-700)'),
36 | 'primary-800': convert('var(--p-primary-800)'),
37 | 'primary-900': convert('var(--p-primary-900)'),
38 | 'primary-950': convert('var(--p-primary-950)'),
39 | 'surface-0': convert('var(--p-surface-0)'),
40 | 'surface-50': convert('var(--p-surface-50)'),
41 | 'surface-100': convert('var(--p-surface-100)'),
42 | 'surface-200': convert('var(--p-surface-200)'),
43 | 'surface-300': convert('var(--p-surface-300)'),
44 | 'surface-400': convert('var(--p-surface-400)'),
45 | 'surface-500': convert('var(--p-surface-500)'),
46 | 'surface-600': convert('var(--p-surface-600)'),
47 | 'surface-700': convert('var(--p-surface-700)'),
48 | 'surface-800': convert('var(--p-surface-800)'),
49 | 'surface-900': convert('var(--p-surface-900)'),
50 | 'surface-950': convert('var(--p-surface-950)'),
51 | },
52 | breakpoints: {
53 | sm: '640px',
54 | md: '768px',
55 | lg: '1024px',
56 | xl: '1280px',
57 | xxl: '1536px',
58 | },
59 |
60 | },
61 | presets: [
62 | presetWind4(),
63 | presetWebFonts({
64 | fonts: {
65 | sans: 'Inter',
66 | mono: 'DM Mono',
67 | condensed: 'Roboto Condensed',
68 | },
69 | // This will download the fonts and serve them locally
70 | processors: createLocalFontProcessor({
71 | // Directory to cache the fonts
72 | cacheDir: 'node_modules/.cache/unocss/fonts',
73 |
74 | // Directory to save the fonts assets
75 | fontAssetsDir: 'public/assets/fonts',
76 |
77 | // Base URL to serve the fonts from the client
78 | fontServeBaseUrl: '/assets/fonts',
79 | }),
80 | }),
81 | presetAttributify(),
82 | presetIcons(),
83 | presetTypography(),
84 | ],
85 | transformers: [
86 | transformerDirectives(),
87 | transformerVariantGroup(),
88 | ],
89 | })
90 |
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "rewrites": [
3 | {
4 | "source": "/(.*)",
5 | "destination": "/index.html"
6 | }
7 | ]
8 | }
--------------------------------------------------------------------------------
/vite-prime-vue-starter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/vite-primevue-starter/9a757f6a1ca5b8dd021b8b3517980300d00a1c13/vite-prime-vue-starter.png
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import * as path from 'node:path'
2 | import vueI18n from '@intlify/unplugin-vue-i18n/vite'
3 | import Vue from '@vitejs/plugin-vue'
4 | import LinkAttributes from 'markdown-it-link-attributes'
5 | import Prism from 'markdown-it-prism'
6 | import Unocss from 'unocss/vite'
7 | import AutoImport from 'unplugin-auto-import/vite'
8 | import Components from 'unplugin-vue-components/vite'
9 | import Markdown from 'unplugin-vue-markdown/vite'
10 | import { defineConfig } from 'vite'
11 | import Inspect from 'vite-plugin-inspect'
12 | import Pages from 'vite-plugin-pages'
13 | import Restart from 'vite-plugin-restart'
14 | import VueDevTools from 'vite-plugin-vue-devtools'
15 | import Layouts from 'vite-plugin-vue-layouts'
16 | import pkg from './package.json'
17 |
18 | const markdownWrapperClasses = 'prose prose-sm m-auto text-left'
19 |
20 | process.env.VITE_APP_BUILD_EPOCH = new Date().getTime()
21 | process.env.VITE_APP_VERSION = pkg.version
22 |
23 | /**
24 | * @type {import('vite').UserConfig}
25 | */
26 | export default defineConfig({
27 | server: {
28 | hmr: {
29 | port: false,
30 | path: '/ws',
31 | },
32 | },
33 |
34 | // https://github.com/antfu/vite-ssg
35 | ssgOptions: {
36 | script: 'async',
37 | formatting: 'minify',
38 | },
39 | test: {
40 | globals: true,
41 | include: ['test/**/*.test.ts'],
42 | environment: 'happy-dom',
43 | },
44 |
45 | optimizeDeps: {
46 | include: [
47 | 'vue-router',
48 | '@vueuse/core',
49 | ],
50 | exclude: [
51 | 'vue',
52 | 'vue-demi',
53 | ],
54 | },
55 | plugins: [
56 | Unocss({}),
57 | Vue({
58 | include: [/\.vue$/, /\.md$/],
59 | template: {
60 | compilerOptions: {
61 | directiveTransforms: {
62 | styleclass: () => ({
63 | props: [],
64 | needRuntime: true,
65 | }),
66 | ripple: () => ({
67 | props: [],
68 | needRuntime: true,
69 | }),
70 | },
71 | },
72 | },
73 | }),
74 | vueI18n({
75 | include: path.resolve(__dirname, './src/i18n/locales/**'),
76 | }),
77 | Components({
78 | dts: 'src/components.d.ts',
79 | resolvers: [
80 | ],
81 | }),
82 | // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
83 | Layouts(),
84 | // https://github.com/webfansplz/vite-plugin-vue-devtools
85 | VueDevTools(),
86 |
87 | // https://github.com/antfu/unplugin-auto-import
88 | AutoImport({
89 | imports: [
90 | 'vue',
91 | 'vue-router',
92 | 'vue-i18n',
93 | '@vueuse/head',
94 | ],
95 | exclude: [
96 | '**/dist/**',
97 | ],
98 | dts: 'src/auto-import.d.ts',
99 | }),
100 | Pages({
101 | // pagesDir: ['src/pages', 'src/pages2'],
102 | pagesDir: [
103 | { dir: 'src/pages', baseRoute: '' },
104 | ],
105 | extensions: ['vue', 'md'],
106 | syncIndex: true,
107 | replaceSquareBrackets: true,
108 | extendRoute(route) {
109 | if (route.name === 'about')
110 | route.props = route => ({ query: route.query.q })
111 |
112 | if (route.name === 'components') {
113 | return {
114 | ...route,
115 | beforeEnter: (route) => {
116 |
117 | // console.log(route)
118 | },
119 | }
120 | }
121 | },
122 | }),
123 | Markdown({
124 | wrapperClasses: markdownWrapperClasses,
125 | headEnabled: true,
126 | markdownItSetup(md) {
127 | // https://prismjs.com/
128 | md.use(Prism)
129 | md.use(LinkAttributes, {
130 | matcher: link => /^https?:\/\//.test(link),
131 | attrs: {
132 | target: '_blank',
133 | rel: 'noopener',
134 | },
135 | })
136 | },
137 | }),
138 | Restart({
139 | restart: ['../../dist/*.js'],
140 | }),
141 |
142 | // https://github.com/antfu/vite-plugin-inspect
143 | Inspect({
144 | // change this to enable inspect for debugging
145 | enabled: false,
146 | }),
147 | ],
148 | resolve: {
149 | alias: {
150 | '@': path.resolve(__dirname, './src'),
151 | '~': path.resolve(__dirname, 'node_modules/'),
152 | },
153 | },
154 |
155 | })
156 |
--------------------------------------------------------------------------------