spartez/vue-atlaskit

https://spartez.github.io/vue-atlaskit

@spartez/vue-atlaskit

Unofficial Vue UI library, built according to the Atlassian Design Guidelines.

Installation

npm install @spartez/vue-atlaskit

ES6

//
// Register a component manually for optimal tree shaking
//
import { Spinner } from '@spartez/vue-atlaskit';

export default {
  components: {
    Spinner
  },
};

Browser

<script src="path/to/vue/vue.min.js"></script>
<script src="https://unpkg.com/@spartez/vue-atlaskit/dist/index.min.js"></script>
<!-- Components are registered globally -->

After that, you can use it in your templates:

<script>
  new Vue({
      el: '#app',
      template: `<Button>{{hello}}</Button>`,
      data: { hello: 'Click Me!' }
  })
</script>

For including styles you can either place the below styles in your index.html

<link href="https://unpkg.com/@spartez/vue-atlaskit/dist/bundle.css" rel="stylesheet">

Or you can import it to your webpack entry point file. This is usually your main.js file.

import '@spartez/vue-atlaskit/dist/bundle.css';

Contributing

See CONTRIBUTING.md.

vue-atlaskit's Issues

Usage with Vue 2.6

Hello,

I tried to use this package with Vue 2.6 and I have found that it is not possible due to peer dependency to Vue 2.5.x. Is this intentional because of some real issues between 2.5 and 2.6, or is it possible to update the Vue version?

Unable to use vue-atlaskit

I am trying to use the package in one of my projects but I can't seem to get it to work. I followed the instructions in the README and installed and included the package like:

...
import atlaskit from '@spartez/vue-atlaskit';
...
Vue.use(atlaskit);

However, while building the application, npm throws this error:

in ./src/main.js

"export 'default' (imported as 'atlaskit') was not found in '@spartez/vue-atlaskit'

Any idea what I might be doing incorrectly?

Is TypeScript support planned with Vue 3?

tree shaking not working

Hi there,

I am trying to use just one component and am including it as explained:
import { ProgressBar } from '@spartez/vue-atlaskit'

However, when I build the project it adds ~400kb to vendor.js, so tree shaking does not seem to be working.

solution for server side rendering

for those who struggling with nuxtjs, here is my solution:

create a plugin at plugins/atlaskit.js:

import * as atlaskitComponents from '@spartez/vue-atlaskit'
import Vue from 'vue'

export default function () {
    Object.entries(atlaskitComponents).forEach(([name, component]) => {
        Vue.component(name, component)
    })
}

and then reference it in nuxt.config.js:

{
  head: {
    link: [
      // not forgetting this!
      { rel: 'stylesheet', href: 'https://unpkg.com/@spartez/vue-atlaskit/dist/bundle.css' }
  },
  plugins: [
    { src: '~plugins/atlaskit.js', mode: 'client' },
  ],
}

then just use atlaskit without import:

<template lang="pug">
div
  Button(appearance="primary" @click="greet") wow
</template>

<script>
export default {
  methods: {
    greet() {
      alert('Greetings from an atlaskit button!')
    }
  }
}
</script>

Editor

How about editor?

Is vue-atlaskit compatibile with vue3?

I have a question, is vue-atlaskit compatible with vue3 and composition API?