prestashop_accounts_vue_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/prestashop_accounts_vue_components@5" defer></script>

# To load latest version
<script src="https://unpkg.com/prestashop_accounts_vue_components" defer></script>

To use the prestashop_accounts_vue_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/prestashop_accounts_vue_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 prestashop_accounts_vue_components --save

# Yarn
$ yarn add prestashop_accounts_vue_components

# pnpm
$ pnpm install prestashop_accounts_vue_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 "prestashop_accounts_vue_components"

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

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

Vue component

<template>
  <div>
    <PsAccounts />
  </div>
</template>
<script setup>
import { PsAccounts } from "prestashop_accounts_vue_components";
</script>

Compatibility

Compatible version of prestashop_accounts_vue_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