vue3-kakao-sdk

Kakao SDK plugin wrapped with Vue3 Composition API

Now you can easily use Kakao SDK with Vue3

Just like this!

<script setup lang="ts">
import { useKakao } from 'vue3-kakao-sdk'
const { kakao } = useKakao()

const onClickLogin = () => {
  kakao.value.Auth.login({
    success (success) {
      console.log(success)  //  profit!
    },
    fail (err) {
      console.error(err)
    }
  })
}
</script>

Intall

Yarn or NPM

# yarn
yarn add vue3-kakao-sdk

# npm
npm install vue3-kakao-sdk

How to use this plugin? 🧐

//  main.js
import { createApp } from 'vue'
import { createVueKakaoSdk } from 'vue3-kakao-sdk'

// You have to pass your "Kakao SDK Javascript apiKey"
const app = createApp(App)
  .use(createVueKakaoSdk('Your Kakao API Javascript Key 😊'))
  .mount('#app')

//  App.vue

// then you can call kakao sdk with
<script setup lang="ts">
import { useKakao } from 'vue3-kakao-sdk'
const { kakao } = useKakao()

const onClickLogin = () => {
  kakao.value.Auth.login({
    success (success) {
      console.log(success)  //  profit!
    },
    fail (err) {
      console.error(err)
    }
  })
}

// or like this
const onClickShareStory = () => {
  window.Kakao.Story.share({
    url: 'https://github.com/eggplantiny/vue-kakao-sdk',
    text: 'Test story share with vue-kakao-sdk'
  })
}
</script>

Use kakao SDK on mount

Kakao SDK cannot be used immediately because loading the Kakao script is asynchronous.

If you want to use this plugin as soon as it is mounted do like this at once

(or just stay few seconds 😂 plugin will load script automatically)

<script setup lang="ts">
import { onMounted } from 'vue'
import { useKakao } from 'vue3-kakao-sdk'

const { kakao, initialize } = useKakao()

onMounted(async () => {
  await initialize()
  kakao.value.Auth.login({
    success(success) {
      console.log(success)  //  yass!
    },
    fail(err) {
      console.error(err)
    }
  })
})
</script>

If you wanna use Kakao SDK on Vue2.x?

Please use Previous Version.

Options

Key	Description	Type	Default
* apiKey	Your Kakao SDK Javascript Key	String	* required
scriptUrl	Link of kakao SDK	String	https://developers.kakao.com/sdk/js/kakao.min.js
scriptId	Script ID of kakao SDK	String	kakao_script
callback	Callback function of script loaded	Function	null

Author

eggplantiny

License

MIT