@prestashopcorp/accounts-components

Prestashop Accounts Vue Components

Usage

We recommend using the Web component by loading the library through CDN to receive the latest components updates

CDN (Recommended)

Web Component (Recommended)

To load a hosted library, copy and paste the HTML snippet for that library (shown below) in your web page.

# To load latest minor version 5
<script src="https://unpkg.com/@prestashopcorp/accounts-components@0" defer></script>

# To load latest version
<script src="https://unpkg.com/@prestashopcorp/accounts-components" defer></script>

To use the @prestashopcorp/accounts-components, you need a prestashop-accounts html tag, when it's in the page you can then call the init function of psaccountsVue

<prestashop-accounts></prestashop-accounts>

<script>
  window.psaccountsVue.init();
</script>

Vue component

If you want to use the component in VueJS you will need to load VueJS through cdn too

<div id="app"></div>

<script src="https://unpkg.com/@prestashopcorp/accounts-components@5/psaccountsVue.umd.js" defer></script>

<script type="module">
  import { createApp } from "https://unpkg.com/vue@3.2.26/dist/vue.esm-browser.js";

  const App = {
    data() {
      return {
        name: "John",
      };
    },
    template: `<div>
            <h1>Hello {{ name }}</h1>
            <prestashop-accounts></prestashop-accounts>
        </div>`,
    mounted() {
      window.psaccountsVue.init();
    },
  };

  createApp(App).mount("#app");
</script>

Local install

First you need to install the package using your package manager

# chose your favorite package manager
# NPM
$ npm install @prestashopcorp/accounts-components --save

# Yarn
$ yarn add @prestashopcorp/accounts-components

# pnpm
$ pnpm install @prestashopcorp/accounts-components

Then you need to choose a way to integrate your component

Web component (recommended)

<template>
  <div>
    <prestashop-accounts></prestashop-accounts>
  </div>
</template>
<script>
import PsAccounts from "@prestashopcorp/accounts-components"

PsAccounts.init();
// OR if you want to use a custom name for the tag
import { PsAccountsWebComponent } from "@prestashopcorp/accounts-components"

customElements.define('your-tag-name', PsAccountsWebComponent)
</script>

Vue component

<template>
  <div>
    <PsAccounts />
  </div>
</template>
<script setup>
import { PsAccounts } from "@prestashopcorp/accounts-components";
</script>

Compatibility

Compatible version of @prestashopcorp/accounts-components with PsAccounts

Ps Accounts Module	Vue Components minimum version	Vue components maximum version
5.0	2.0.0	2.0.4
5.0.2	2.0.0	2.0.4
5.0.3	2.0.0	2.0.4
>=5.1.0	3.0.0	3.0.4