npm package: @nacelle/nacelle-recharge-nuxt-module
Description: Integrates Recharge into your Nacelle Nuxt project
Latest version: 0.0.9
Deprecated: This package is deprecated. To integrate a third party script with your Nuxt project, follow our docs here: https://docs.getnacelle.com/nuxt/external-scripts.html

# [DEPRECATED]

This package is deprecated. To integrate a third party script with your Nuxt project, follow our docs here: https://docs.getnacelle.com/nuxt/external-scripts.html
# Nacelle Recharge Nuxt Module

Adds Vue.js components for integrating [Recharge](https://rechargepayments.com/) subscriptions in your [Nacelle](https://getnacelle.com/) Nuxt project.

## Requirements

* A Nacelle project set up locally. See https://docs.getnacelle.com for getting started.
* A Recharge app installed and setup on your Shopify store.

## Setup

### Add Module to Nacelle

Once you hace Nacelle and Recharge set up you can install this module in your project from `npm`:

```
npm install @nacelle/nacelle-recharge-nuxt-module --save
```

After the package has installed, open `nuxt.config.js`. Under `modules` add `@nacelle/nacelle-recharge-nuxt-module` to the array. It should look something like this:

```
modules: [
  '@nuxtjs/pwa',
  '@nuxtjs/dotenv',
  '@nacelle/nacelle-nuxt-module',
  '@nuxtjs/sitemap',
  '@nacelle/nacelle-recharge-nuxt-module'
],
```

### Metafields

Recharge sets important product metafields that we need to expose to Nacelle. We can do this with a simple graphql query using [Shopify's GraphQL Admin API](https://help.shopify.com/en/api/graphql-admin-api/reference/object/metafieldstorefrontvisibility)

This module adds a Nuxt Command for exposing all of the needed metafields. You should only need to run this once.
Let's say your store is: `starship-furniture.myshopify.com` and your GraphQl Admin API Access token is: `1234josdfijfslkj1324234`

```sh
nuxt expose-recharge-meta --store starship-furniture --token 1234josdfijfslkj1324234
```

* Please note you may need to target the `nuxt` command (which is located in `node_modules/bin`) by using `npx` or `yarn`:

    `npx nuxt expose-recharge-meta` or `yarn nuxt expose-recharge-meta`.

### Add the components to your 

There are two components you can add to your Nacelle site: `<recharge-widget />` and `<subscription-add-to-cart-button />`.

**Recharge Widget** will display a radio selector for customer to choose between one time and subscription purchases as well as a drop down to select frequencies (This is set in a product's ruleset in Recharge admin). Add this component to `pages/products/_handle.vue` or anywhere you use products and pass the product object as a prop.

```
<recharge-widget
  v-if="isSubscription"
  :product="product"
  :variant="currentVariant"
  :metafields.sync="metafields"
  :frequency.sync="frequency"
/>
```

**Subscription Add To Cart Button** will display an add to cart button for handling subscribe and save functionality. Add this component to `pages/products/_handle.vue` or anywhere you use products and pass the product object as a prop.

```
<subscription-add-to-cart-button
  :product="product"
  :variant="selectedVariant"
  :metafields="metafields"
  :all-options-selected="allOptionsSelected"
  :only-one-option="allOptions.length === 1"
/>
```

**Subscription Cart Line Item Details** a slotted component to give access to subscription properties to display on cart line items. Add this component to `components/CartItem.vue` or anywhere you need to display cart line items. Pass line-item as prop.
Supported Subscription Properties:
```
[
  'charge_interval_frequency',
  'order_interval_frequency',
  'order_interval_unit',
  'cutoff_day_of_month',
  'cutoff_day_of_week',
  'expire_after_specific_number_of_charges',
  'order_day_of_month',
  'order_day_of_week'
]
```
Two helper properties are include `frequency` and `unit` (unit is automatically pluralized based on frequency).

```
<subscription-cart-line-item-details :line-item="item">
  <template v-slot:default="{ subscription }">
    Your recurring order will be shipped every <strong>{{ subscription.frequency }} {{ subscription.unit }}</strong>
    Easily modify or cancel your subscription up to 3 days before your ship date.
  </template>
</subscription-cart-line-item-details>
```