Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

solution for server side rendering #51

Open
sheey11 opened this issue Aug 25, 2021 · 0 comments
Open

solution for server side rendering #51

sheey11 opened this issue Aug 25, 2021 · 0 comments

Comments

@sheey11
Copy link

sheey11 commented Aug 25, 2021

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant