@qikify/polaris-vue NPM

Polaris Vue (Support Vue 3.0)

Polaris Vue by qikify only supports Vue 3.0+.

Polaris Vue by Qikify 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: 9.8.0 - Migrated date: May 20th, 2022.

Documentation

Online documentation: Click Here

Installation

Via NPM:

npm install @qikify/polaris-vue

Via Yarn:

yarn add @qikify/polaris-vue

Usage

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

//main.js
import { createApp } from 'vue'
import PolarisVue from '@qikify/polaris-vue' // (✓)
import '@qikify/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 '@qikify/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>

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/qikify/polaris-vue.git

# Install packages
yarn

# Create a Demo.vue file to test

# Development & Demo
yarn dev