# @amilochau/core-vue3
> Core plugin for vue.js (v3) projects
Latest version **0.8.21** (published 2025-02-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install @amilochau/core-vue3
pnpm add @amilochau/core-vue3
yarn add @amilochau/core-vue3
bun add @amilochau/core-vue3
```
## Health
**Score 35/100 (D)** — status: maintenance-mode.
Positive: esm support; no vulnerabilities; has provenance.
Warnings: low downloads; no types; pre 1.0.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.8.21 |
| Published | 2025-02-02 |
| First published | 2022-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=20.0.0 |
| Dependencies | 26 |
| Unpacked size | 151.1 KB |
| Known vulnerabilities | 0 (+8 in 1 direct dependencies) |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | Antoine Milochau |
| Maintainers | amilochau |
| Keywords | vuejs, plugin |
## Links
- npm: https://www.npmjs.com/package/@amilochau/core-vue3
- Repository: https://github.com/amilochau/core-vue3
- Homepage: https://github.com/amilochau/core-vue3#readme
- Issues: https://github.com/amilochau/core-vue3/issues
- Funding: https://github.com/sponsors/amilochau
- npm.io page: https://npm.io/package/@amilochau/core-vue3
## Dependencies (26)
- [vue](https://npm.io/package/vue.md) ^3.5.12
- [sass](https://npm.io/package/sass.md) ^1.83.4
- [vite](https://npm.io/package/vite.md) ^5.4.14
- [pinia](https://npm.io/package/pinia.md) ^2.3.1
- [eslint](https://npm.io/package/eslint.md) ^8.57.1
- [@mdi/js](https://npm.io/package/@mdi/js.md) ^7.4.47
- [vue-tsc](https://npm.io/package/vue-tsc.md) ^2.2.0
- [vuetify](https://npm.io/package/vuetify.md) ^3.7.9
- [vue-i18n](https://npm.io/package/vue-i18n.md) ^10.0.5
- [typescript](https://npm.io/package/typescript.md) ^5.7.3
- [vue-router](https://npm.io/package/vue-router.md) ^4.5.0
- [@types/node](https://npm.io/package/@types/node.md) ^20.17.16
- [@unhead/vue](https://npm.io/package/@unhead/vue.md) ^1.11.18
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^11.3.0
- [@vue/tsconfig](https://npm.io/package/@vue/tsconfig.md) ^0.5.1
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) ^0.10.0
- [vite-plugin-pwa](https://npm.io/package/vite-plugin-pwa.md) ^0.20.5
- [@tsconfig/node20](https://npm.io/package/@tsconfig/node20.md) ^20.1.4
- [eslint-plugin-vue](https://npm.io/package/eslint-plugin-vue.md) ^9.32.0
- [@vitejs/plugin-vue](https://npm.io/package/@vitejs/plugin-vue.md) ^5.2.1
- [vite-plugin-vuetify](https://npm.io/package/vite-plugin-vuetify.md) ^2.0.4
- [vue-cli-plugin-vuetify](https://npm.io/package/vue-cli-plugin-vuetify.md) ^2.5.8
- [@stylistic/eslint-plugin](https://npm.io/package/@stylistic/eslint-plugin.md) ^1.8.1
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^7.18.0
- [@intlify/unplugin-vue-i18n](https://npm.io/package/@intlify/unplugin-vue-i18n.md) ^5.3.1
- [vue-component-type-helpers](https://npm.io/package/vue-component-type-helpers.md) ^2.2.0
## Recent versions
- 0.8.21 (latest) — 2025-02-02
- 0.8.20 — 2024-12-26
- 0.8.19 — 2024-11-10
- 0.8.18 — 2024-09-26
- 0.8.17 — 2024-09-22
- 0.8.16 — 2024-09-10
- 0.8.15 — 2024-08-28
- 0.8.14 — 2024-08-19
- 0.8.13 — 2024-08-19
- 0.8.12 — 2024-08-16
- 0.8.11 — 2024-08-12
- 0.8.10 — 2024-08-09
- 0.8.9 — 2024-07-15
- 0.8.8 — 2024-06-23
- 0.8.7 — 2024-06-15
- … 97 more at https://npm.io/package/@amilochau/core-vue3/versions
## README
@amilochau/core-vue3
`@amilochau/core-vue3` is a opinionated package used to create vue.js v3 applications.
## Main features
- Application layout, with header and footer bars, navigation drawer, snackbar for messages
- Privacy with cookies approbation via a dedicated layer, privacy page, data cleaning on logout
- API integration, with error codes handling
- Default pages for error codes
- Reactive SEO tags per page
- Internationalization, light/dark themes
- Forms validation helpers
- Identity integration with AWS Cognito, using `amilochau/core-vue3-auth`
- PWA native support, with update button
## Usage
`amilochau/core-vue3` is proposed as a vue plugin.
1. Install the npm packages
Run the following command to install the npm package:
```pwsh
npm install @amilochau/core-vue3 @amilochau/core-vue3-auth
```
Note that `amilochau/core-vue3-auth` is optional - you can skip it if you don't need authentication with AWS Cognito.
2. Configure the plugin
Define your `coreOptions` - use a dedicated file for better code separation:
```typescript
import type { CoreOptions } from '@amilochau/core-vue3':
export const environmentOptionsBuilder: (context: { host: string, subdomain: string }) => EnvironmentOptions = ({ host, subdomain }) => {
return {
variables: {
VITE_API_URL: 'YOUR API BASE URI',
},
isProduction: !host.includes('localhost') && !subdomain.includes('dev'),
};
};
export const coreOptionsBuilder: (context: EnvironmentOptions) => CoreOptions = ({ variables }) => ({
application: {
name: 'YOU APPLICATION NAME',
contact: 'YOUR APPLICATION OWNER',
navigation: {
items: ref([
// YOUR APPLICATION NAVIGATION LINKS
])
},
},
api: {
buildApiBaseUri: ({ relativeBaseUri }) => `${variables['VITE_API_URL']}${relativeBaseUri}`,
},
i18: {
messages: {
en: {}, // <== USE THIS SECTION TO ADD GLOBAL ENGLISH TRANSLATIONS
fr: {} // <== USE THIS SECTION TO ADD GLOBAL FRENCH TRANSLATIONS
},
},
identity: {
cognito: {
userPoolId: 'YOUR COGNITO USER POOL ID',
clientId: 'YOUR COGNITO CLIENT ID',
}
},
routes: [], // <== USE THIS SECTION TO ADD ROUTES
clean: () => () => {} // WHAT TO CALL TO CLEAN LOCAL DATA ON LOGOUT
});
```
3. Register the plugin
Register `amilochau/core-vue3` in your main file:
```typescript
import { createCoreVue3App } from '@amilochau/core-vue3';
import { coreOptionsBuilder, environmentOptionsBuilder } from './data/config';
import 'vuetify/styles';
export const coreVue3App = createCoreVue3App(environmentOptionsBuilder, coreOptionsBuilder);
```
If you want to use authentication, register `amilochau/core-vue3-auth` in your main file:
```typescript
import { createCoreVue3AuthApp } from '@amilochau/core-vue3-auth';
import { coreOptionsBuilder, environmentOptionsBuilder } from './data/config';
import 'vuetify/styles';
export const coreVue3App = createCoreVue3AuthApp(environmentOptionsBuilder, coreOptionsBuilder);
```
---
## Dependencies
The following plugins are installed by `@amilochau/core-vue3`:
- `pinia`
- `vue-i18n`
- `vue-router`
- `vuetify`
- `vite-plugin-pwa`
The following plugin is installed by `@amilochau/core-vue3-auth`:
- `aws-amplify`
See the full list of dependencies [here](/packages/core-vue3/package.json).
## Composition API
Here are the helpers you can use from your code.
| Helper | Description |
| ------ | ----------- |
| `useApiAnonymous` | Sends HTTP requests to the API gateway configured via `api.gatewayUri` ; manages HTTP errors |
| `useApi` | Sends authenticated HTTP requests to the API gateway configured via `api.gatewayUri` ; manages HTTP errors *(only if `amilochau/core-vue3-auth is configured`)* |
| `useClean` | Cleans data from storage, typically on logout, as configured via `clean` |
| `useCognito` | Interact with AWS Cognito *(only if `amilochau/core-vue3-auth is configured`)* |
| `useAppOptions` | Lets you get the environment and core options defined on plugin registration |
| `useHandle` | Handle asynchronous requests to manage errors, with loader bar and snackbar messages |
| `useNavigation` | Helps you use router with back navigation |
| `useNotifications` | Lets you register your application for push notifications |
| `usePage` | Define page metadata |
| `useValidationRules` | Lets you use pre-defined validation rules on plain data |
Here are the `pinia` stores you can use from your code.
| Store name | Helper | Description |
| ---------- | ------ | ----------- |
| `app` | `useAppStore` | Lets you display messages in a snackbar |
| `cookies` | `useCookiesStore` | Lets you known if the current user has accepted cookies |
| `identity` | `useIdentityStore` | Lets you display data from the current user |
| `language` | `useLanguageStore` | Lets you know the current language configured for the UI |
| `notifications` | `useNotificationsStore` | Lets you get data on notifications registration |
| `theme` | `useThemeStore` | Lets you know the current theme configured for the UI |
| `pwa` | `usePwaStore` | Lets you manage the PWA application updates |
## Options
Application options must be configured on the application initialization - using the `createCoreVue3App` or the `createCoreVue3AuthApp` method, and can then be injected via the `useAppOptions` composition API.
Here are the proposed options.
| Property | Usage | Type | Description |
| -------- | ----- | ---- | ----------- |
| `coreOptions` | `const { coreOptions } = useAppOptions();` | `CoreOptions` | Core options, containing settings provided on application initialization. |
| `environmentOptions` | `const { environmentOptions } = useAppOptions();` | `EnvironmentOptions` | Environment options, containing environment variables. |
| `apiEnabled ` | `const { apiEnabled } = useAppOptions();` | `boolean` | Whether API capabilities are properly configured, and can be used in the application. |
| `authenticationEnabled` | `const { authenticationEnabled } = useAppOptions();` | `boolean` | Whether identity capabilities are properly configured, and can be used in the application. |
See the full definition of options [here](/packages/core-vue3/src/types/options.ts).
You can find a sample of these configuration options in the [sample app options](/packages/playground/src/data/config.ts).
## Notes
- You have to define a route named `Home`, so that default redirections can work.
---
## Contribute
Feel free to push your code if you agree with publishing under the [MIT license](./LICENSE).
---
_Source: https://npm.io/package/@amilochau/core-vue3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._