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/[email protected]/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 |