How can I use javascript library function in nuxt.js?-CodePudding

This source worked in 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>
        // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
        Kakao.init('JAVASCRIPT_KEY');

        // SDK 초기화 여부를 판단합니다.
        console.log(Kakao.isInitialized());
    </script>
</head>
<body></body>
</html>

So I thought the next source will work on Nuxt.js.

But it showed just

'ReferenceError

Kakao is not defined' in these source

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'},
    ]
  }, ```

in pages/login.vue

<script>
  export default {
  ...
}
  Kakao.init('JAVASCRIPT_KEY');

  console.log('Kakao.isInitialized() >>', Kakao.isInitialized());
</script>

Why is this source not working?

CodePudding user response：

There are basically 2 approaches you can do:

1. Load the library directly in your layout/page/component

head () {
  if (window.Kakao) {
    this.afterKakaoLoaded()
    return
  }

  return {
    script: [
      {
        hid: 'kakao',
        src: 'https://developers.kakao.com/sdk/js/kakao.js',
        callback: () => {
          this.afterKakaoLoaded()
        }
      }
    ]
  }
},

methods: {
  afterKakaoLoaded () {
    window.Kakao.init('...')
  }
}

2. Load the library within a plugin

Josh Deltener wrote a great article about how to achieve that: https://deltener.com/blog/nuxt-third-party-code-is-poison/

CodePudding user response：

In nuxt you can overwrite the default .nuxt/views/app.template.html.

You need to create app.html file at the root of the project. Then put the below code inside this file:

app.html

<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

Then you can follow the traditional way that you mentioned in question:

<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script>
        // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
        Kakao.init('JAVASCRIPT_KEY');

        // SDK 초기화 여부를 판단합니다.
        console.log(Kakao.isInitialized());
    </script>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

But be aware that in this method, all pages in your application load this script.