0.8.18 • Published 3 months ago

@amilochau/core-vue3-auth v0.8.18

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

@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:

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.

  1. Configure the plugin

Define your coreOptions - use a dedicated file for better code separation:

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
});
  1. Register the plugin

Register amilochau/core-vue3 in your main file:

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:

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.

Composition API

Here are the helpers you can use from your code.

HelperDescription
useApiAnonymousSends HTTP requests to the API gateway configured via api.gatewayUri ; manages HTTP errors
useApiSends authenticated HTTP requests to the API gateway configured via api.gatewayUri ; manages HTTP errors (only if amilochau/core-vue3-auth is configured)
useCleanCleans data from storage, typically on logout, as configured via clean
useCognitoInteract with AWS Cognito (only if amilochau/core-vue3-auth is configured)
useAppOptionsLets you get the environment and core options defined on plugin registration
useHandleHandle asynchronous requests to manage errors, with loader bar and snackbar messages
useNavigationHelps you use router with back navigation
useNotificationsLets you register your application for push notifications
usePageDefine page metadata
useValidationRulesLets you use pre-defined validation rules on plain data

Here are the pinia stores you can use from your code.

Store nameHelperDescription
appuseAppStoreLets you display messages in a snackbar
cookiesuseCookiesStoreLets you known if the current user has accepted cookies
identityuseIdentityStoreLets you display data from the current user
languageuseLanguageStoreLets you know the current language configured for the UI
notificationsuseNotificationsStoreLets you get data on notifications registration
themeuseThemeStoreLets you know the current theme configured for the UI
pwausePwaStoreLets 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.

PropertyUsageTypeDescription
coreOptionsconst { coreOptions } = useAppOptions();CoreOptionsCore options, containing settings provided on application initialization.
environmentOptionsconst { environmentOptions } = useAppOptions();EnvironmentOptionsEnvironment options, containing environment variables.
apiEnabledconst { apiEnabled } = useAppOptions();booleanWhether API capabilities are properly configured, and can be used in the application.
authenticationEnabledconst { authenticationEnabled } = useAppOptions();booleanWhether identity capabilities are properly configured, and can be used in the application.

See the full definition of options here.

You can find a sample of these configuration options in the sample app options.

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.

0.8.18

3 months ago

0.8.16

3 months ago

0.8.15

4 months ago

0.8.17

3 months ago

0.8.9

5 months ago

0.8.8

6 months ago

0.8.5

6 months ago

0.8.4

7 months ago

0.8.7

6 months ago

0.8.6

6 months ago

0.8.12

4 months ago

0.8.11

4 months ago

0.8.14

4 months ago

0.8.13

4 months ago

0.8.10

5 months ago

0.8.3

7 months ago

0.8.2

7 months ago

0.8.1

7 months ago

0.8.0

8 months ago

0.8.0-beta.34

8 months ago

0.8.0-beta.35

8 months ago

0.8.0-beta.33

8 months ago

0.8.0-beta.32

10 months ago

0.8.0-beta.31

10 months ago

0.8.0-beta.29

10 months ago

0.8.0-beta.30

10 months ago

0.8.0-beta.27

11 months ago

0.8.0-beta.28

11 months ago

0.8.0-beta.26

11 months ago

0.8.0-beta.25

12 months ago

0.8.0-beta.24

12 months ago

0.8.0-beta.23

1 year ago

0.8.0-beta.19

1 year ago

0.8.0-beta.21

1 year ago

0.8.0-beta.22

1 year ago

0.8.0-beta.20

1 year ago

0.8.0-beta.18

1 year ago

0.8.0-beta.14

1 year ago

0.8.0-beta.15

1 year ago

0.8.0-beta.16

1 year ago

0.8.0-beta.17

1 year ago

0.8.0-beta.13

1 year ago

0.8.0-beta.10

1 year ago

0.8.0-beta.11

1 year ago

0.8.0-beta.12

1 year ago

0.8.0-beta.8

1 year ago

0.8.0-beta.9

1 year ago

0.8.0-beta.6

1 year ago

0.8.0-beta.5

1 year ago

0.8.0-beta.4

1 year ago

0.8.0-beta.3

1 year ago

0.8.0-beta.2

1 year ago

0.8.0-beta.1

1 year ago

0.7.0

1 year ago

0.7.0-beta.18

1 year ago

0.7.0-beta.17

1 year ago

0.7.0-beta.16

1 year ago

0.7.0-beta.15

1 year ago

0.7.0-beta.14

1 year ago

0.7.0-beta.13

1 year ago

0.7.0-beta.12

1 year ago

0.7.0-beta.11

1 year ago

0.7.0-beta.10

1 year ago

0.7.0-beta.9

1 year ago

0.7.0-beta.8

1 year ago

0.7.0-beta.7

1 year ago

0.7.0-beta.6

1 year ago

0.7.0-beta.5

1 year ago

0.7.0-beta.4

1 year ago

0.7.0-beta.3

1 year ago

0.7.0-beta.2

1 year ago