This code snippet was successfully working in an html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao JavaScript SDK</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
// Initialize the SDK with your app's JavaScript key
Kakao.init('JAVASCRIPT_KEY');
// Check if the SDK is initialized
console.log(Kakao.isInitialized());
</script>
</head>
<body></body>
</html>
However, when I tried to implement a similar setup in Nuxt.js, I encountered an issue:
Instead of working as expected, I received a 'ReferenceError - Kakao is not defined' in the following code snippet:
located in nuxt.config.js
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'P-Cloud OCR',
meta: [
{ 'http-equiv': 'X-UA-Compatible', content: 'IE=Edge' },
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
script: [
{ src: 'https://developers.kakao.com/sdk/js/kakao.js'},
]
},
This issue persisted even when I tried to include the Kakao SDK in pages/login.vue:
<script>
export default {
...
}
Kakao.init('JAVASCRIPT_KEY');
console.log('Kakao.isInitialized() >>', Kakao.isInitialized());
</script>
Why is this implementation not functioning properly?