This package has been deprecated

Author message:

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/nacelle-recharge-nuxt-module

[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 subscriptions in your Nacelle 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

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

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>