2.3.0 • Published 5 months ago

@ezpaarse-project/ezreeport-vue v2.3.0

Weekly downloads
-
License
CeCILL
Repository
github
Last release
5 months ago

@ezpaarse-project/ezreeport-vue

Vue components used to interact with ezREEPORT API

Requirements

  • vue@^3.5 (npm)
  • vue-i18n@^10 (npm)
  • vuetify@^3.7 (npm)
  • @mdi/font@^7.4 (npm)

Install

npm i --save @ezpaarse-project/ezreeport-vue

First Usage

In order to use ezreeport components, you need to register the plugin in your Vue application :

import { createApp } from 'vue';

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { en as vuetifyEn, fr as vuetifyFr } from 'vuetify/locale';
import { createVuetify } from 'vuetify'

import { createI18n } from 'vue-i18n';

import '@ezpaarse-project/ezreeport-vue/styles';
import { en as ezrEn, fr as ezrFr } from '@ezpaarse-project/ezreeport-vue/locale';
import ezreeportVue from '@ezpaarse-project/ezreeport-vue';

const app = createApp({ /* ... */ });

const i18n = createI18n({
  // You can manually merge messages
  // You may want to include vuetify messages
  messages: {
    en: { $vuetify: vuetifyEn, $ezreeport: ezrEn },
    fr: { $vuetify: vuetifyFr, $ezreeport: ezrFr },
  },
})
app.use(i18n);

const vuetify = createVuetify({ /* ... */ });
app.use(vuetify); // You need to setup Vuetify before ezreeport

app.use(ezreeportVue, {
  locale: {
    i18n: i18n.global, // You can pass the instance of i18n and plugin will merge messages
    namespaces: {
      // You can custom how "namespaces" are displayed, you can use a string
      // that will passed to all locales of i18n
      label: '@:institutions.title',
      // Or pass individual definitions
      label: {
        en: 'Institution',
        fr: 'Établissement'
      }
    },
  },
  errorHandler: (msg, err) => {
    console.error(msg, err);
  }
})

Whenever you'll use a ezreeport component, you will need to setup ezreeport's SDK with the prepareClient function :

<template>
  <ezr-health-status />
</template>

<script setup>
// ezreeport setup
import { prepareClient } from '@ezpaarse-project/ezreeport-vue';

prepareClient(
  'http://localhost:8080', // ezREEPORT API url
  { token: '<CURRENT USER TOKEN>' }
);
</script>

Nuxt 3

You can use nuxt modules like vuetify-nuxt-module (npm) and @nuxtjs/i18n (npm) instead of raw dependencies.

Add plugin config into plugins/ezreeport.ts :

// plugins/ezreeport.js|ts
import { defineNuxtPlugin } from '#imports';
import ezreeportVue from '@ezpaarse-project/ezreeport-vue';

export default defineNuxtPlugin({
  async setup(nuxtApp) {
    // We need to wait for vuetify
    nuxtApp.hook('vuetify:ready', () => {
      nuxtApp.vueApp.use(ezreeportVue, {
        locale: {
          i18n: nuxtApp.$i18n, // Pass current instance of i18n
        },
      });
    });
  },
});

Documentation / Dev

Since many components directly use ezREEPORT's API, you must run a working ezREEPORT in order to start/generate documentation.

Manually (or dev)

Create a .env.local and overrides env vars :

  • VITE_EZR_TOKEN: Used to login
  • VITE_EZR_API: Used to fetch data, etc.

Then run

npm run build:story
# or npm run dev

Finally run an http server over newly created storybook-static.

Docker

A the root of this monorepo, there's a Dockerfile wtih a vuedoc target that you can use to generate a static version of the documentation.

The dockerfile accept 3 arguments :

  • REPORT_TOKEN: Used to login
  • REPORT_API: Used to fetch data, etc.

Example :

docker build \
  --target vuedoc \
  -t ezreeport-vuedoc:latest \
  --build-arg REPORT_TOKEN="MySecretTokenGeneratedByEzReeport" \
  --build-arg REPORT_API="https://url-to-ezreeport.dev/api/" \
  .

Once built, you can start the documentation by running (8888 is just the port on the host machine, you can change it to whatever you want) :

docker run -p 8888:80 ezreeport-vuedoc:latest
2.1.0-rc.2

7 months ago

2.3.0-rc.1

5 months ago

2.1.0-rc.1

7 months ago

2.1.0-rc.3

7 months ago

2.2.0-beta.1

6 months ago

1.4.0

11 months ago

2.3.0-beta.1

5 months ago

2.2.0

6 months ago

2.0.0

8 months ago

1.4.0-rc.1

11 months ago

2.0.0-rc.2

8 months ago

2.2.0-rc.1

6 months ago

2.0.0-rc.1

9 months ago

2.3.0

5 months ago

2.0.0-beta.2

9 months ago

2.0.0-beta.1

10 months ago

2.1.0

7 months ago

2.0.0-beta.4

8 months ago

2.0.0-beta.3

9 months ago

2.1.0-beta.1

7 months ago

2.1.0-beta.3

7 months ago

2.1.0-beta.2

7 months ago

2.1.0-beta.5

7 months ago

2.1.0-beta.4

7 months ago

1.2.0

1 year ago

1.3.1-rc.1

1 year ago

1.2.0-beta.1

1 year ago

1.2.0-beta.2

1 year ago

1.2.0-rc.1

1 year ago

1.3.0-rc.1

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

1.3.1-beta.1

1 year ago

1.1.0

2 years ago

1.1.0-rc.1

2 years ago

1.1.0-beta.1

2 years ago

1.0.0

2 years ago

1.0.0-beta.33

2 years ago

1.0.0-beta.34

2 years ago

1.0.0-beta.31

2 years ago

1.0.0-beta.32

2 years ago

1.0.0-beta.30

2 years ago

1.0.0-rc.1

2 years ago

1.0.0-beta.22

2 years ago

1.0.0-beta.23

2 years ago

1.0.0-beta.20

2 years ago

1.0.0-beta.21

2 years ago

1.0.0-beta.28

2 years ago

1.0.0-beta.29

2 years ago

1.0.0-beta.26

2 years ago

1.0.0-beta.27

2 years ago

1.0.0-beta.24

2 years ago

1.0.0-beta.25

2 years ago

1.0.0-beta.19

2 years ago

1.0.0-beta.17

2 years ago

1.0.0-beta.18

2 years ago

1.0.0-beta.15

2 years ago

1.0.0-beta.16

2 years ago

1.0.0-beta.13

2 years ago

1.0.0-beta.14

2 years ago

1.0.0-beta.12

2 years ago

1.0.0-beta.11

2 years ago

1.0.0-beta.10

2 years ago

1.0.0-beta.9

2 years ago

1.0.0-beta.8

2 years ago

1.0.0-beta.7

2 years ago

1.0.0-beta.6

2 years ago

1.0.0-beta.5

2 years ago

1.0.0-beta.3

2 years ago

1.0.0-beta.2

2 years ago

1.0.0-beta.0

3 years ago

1.0.0-beta.1.1

3 years ago

1.0.0-beta.1.0

3 years ago

1.0.0-beta.1

3 years ago

1.0.0-beta.4.2

3 years ago

1.0.0-beta.4.1

3 years ago

1.0.0-beta.4

3 years ago