Nuxt-polaris NPM

nuxt-polaris

Nuxt module wrapper for polaris-vue

Allows you to use Shopify Polaris components in Vue 2.

This library currently contains components up-to-date with: @shopify/polaris v1.9.1

Setup

Add nuxt-polaris dependency to your project

yarn add nuxt-polaris # or npm install nuxt-polaris

Add nuxt-polaris to the modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    'nuxt-polaris',

    // With options (CURRENTLY UNSUPPORTED)
    // ['{{ name }}', { /* module options */ }]
  ]
}

Viewing the demo page

The demo page contains code examples of almost all the functionality in the library, so it can be pretty helpful.

To view the demo, open up node_modules/nuxt-polaris/test/index.html after installing the library.

Online version: http://demo.polaris-vue.eastsideco.io/

Or to create a standalone copy: clone the repo, run npm run dev, then open the file at test/index.html.

Differences to @shopify/polaris

There are a few differences from the official react version you should be aware of:

1. Naming for some attributes has been adjusted to be more Vue-like.

i.e. Button is <polaris-button>, helpText is :help-text, and onDismiss is @dismiss.

                     |  Polaris        |  Polaris-Vue     |
                     +-----------------+------------------+
Component            |  Banner         |  polaris-banner  |
Prop (HTML attr)     |  helpText       |  help-text       |
Prop (JS)            |  helpText       |  helpText        |
Event                |  onDismiss      |  @dismiss        |

2. Attributes in the original library which accept ReactNodes have been implemented as both props and slots in this library, so you can include slot templates in them if needed.

<polaris-layout-section :description="Hello world!">
    <p>Body</p>
</polaris-layout-section>

<polaris-layout-section>
    <template slot="description">
        Hello <strong>world</strong>!
    </template>
    <p>Body</p>
</polaris-layout-section>