vuejsvn / polaris-vue

Shopify Polaris design system for Vue JS. Shopify’s design system to help us build the great apps for all of our merchants.

Polaris Vue (Support Vue 3.0)

Polaris Vue by Ownego only supports Vue 3.0+.

Polaris Vue based on Shopify Polaris style guide, built especially for Vue 3. We're trying to make it mostly close with Shopify style guide and get a better performance.

Follow Polaris React version: 10.12.0 - Migrated date: Nov 23rd, 2022.

Documentation

Online documentation: Click Here

Installation

Via NPM:

npm install @ownego/polaris-vue

Via Yarn:

yarn add @ownego/polaris-vue

Usage

Use as a Vue 3 plugin (globally registers all components):

//main.js
import { createApp } from 'vue'
import PolarisVue from '@ownego/polaris-vue' // (✓)
import '@ownego/polaris-vue/dist/style.css' // (✓) This will be deprecated in the future, right after Vue 3 supports css injections.
import App from './App.vue'

//...
const app = createApp(App)
app.use(PolarisVue) // (✓)
...

OR use individual component:

import { List, Icon } from '@ownego/polaris-vue';

AppProvider

The AppProvider component is required to use PolarisVue. Without it, the components in your application will not function correctly. You must wrap the root (the top) of your application in the app provider component.

// App.vue
<template>
<AppProvider>
  ...
</AppProvider>
</template>

<script></script>

NUXT 3

We have tested support for Nuxt 3 in non-SSR mode only. To use with Nuxt 3, follow the below configuration and then use the plugin in your components/pages

Plugin File

Create a new plugin file at <project-root>/plugins/polaris.client.ts and update the content to following

import PolarisVue from "@ownego/polaris-vue";
import "@ownego/polaris-vue/dist/style.css";

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(PolarisVue);
});

Nuxt Config

Update <project-root>/nuxt.config.ts to include following config values

export default defineNuxtConfig({
  ...
  build: {
    transpile: ["@ownego/polaris-vue"],
  },
  ...
});

De-duplicating Vue version

PolarisVue, other packages and your project may require access to the global Vue reference. So sometimes, you may get the runtime error message like:

TypeError: Cannot read properties of null (reading 'isCE')
renderSlot(...)
...

To avoid this, simply add dedupe: ['vue'] to your vite.config.ts file, like below:

export default defineConfig({
  resolve: {
    ...
    dedupe: ['vue'],
  },
  ...
});

---

Developers / Build

# Clone repo
git clone https://github.com/ownego/polaris-vue.git

# Install packages
yarn

# Create a Demo.vue file to test

# Development & Demo
yarn dev

Contributing

Polaris Vue by Ownego is an open source project and we are very happy to accept community contributions.

If you notice any bugs, please create issues under Issues. We will update the contribution rules later.

License

Code released under the MIT License. Copyright (c) 2021 Ownego

Thank you! 🎉