How can I use Ant-design-vue using cdn?

Question

How can I use Ant-design-vue using cdn?

135 views Asked by Ishaq Kamran At 21 February 2024 at 21:04

I am trying to build a Vue macro app to use in NetSuite for specific functionality. Since I cannot use npm or other package installers, I need to use CDN. The Vue app is working, and even Ant Design is also working. The only problem I am having is that it is not picking up the styles for any Ant Design component. This is my code:

<html>

<head>
  <title>Auto Refresh Page</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <link href="https://unpkg.com/[email protected]/dist/antd.min.css" rel="stylesheet">
  </link>
  <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
</head>

<body>
  <div id="app">
  </div>
  <script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
  <script>
    const app = Vue.createApp({
      el: "#app",
      data() {
        return {
          moduleLoaded: false,
          currentRecordModule: null,
          backgroundProcess: false,
          showModal: false,
        };
      },
      methods: {
        init() {
          const currentRecordModule = require(['N/currentRecord'], (currentRecord) => {
            this.moduleLoaded = true
            this.currentRecordModule = currentRecord
          });
        },

        reloadPage() {
          location.reload(true)
        },

        showAlert() {
          this.showModal = true
          const iframeHtml = '<iframe src="${activeBgTaskUrl}" style="width: 100%; height: 400px; border: none;"></iframe>';
          
        },

        handleShowBackgroundProcessAlert(event) {
          if (event.target.id === 'showBackgroundProcessAlert') {
            this.showAlert()
          }
        },
      },

      mounted() {
        console.log('App mounted')
        this.init();
        document.addEventListener('click', this.handleShowBackgroundProcessAlert)
      },

      },

      template: `<a-button icon="search" type="primary">Primary Button</a-button>
    <a-modal v-model:visible="showModal" title="Basic Modal" @ok="handleOk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>`
    });
    app.mount('#app');
  </script>
</body>

</html>

I want to open a modal in the showAlert function. I have tried multiple things, including directly accessing the Ant Design global variable, using the import statement, and using the require method, but none of them are working. The button is showing, but without any styles, and the same goes for the modal. For those who know NetSuite, creating a Suitelet is not an option.

EDIT

It is not loading the ant design components too and giving me these warnings:

[Vue warn]: Failed to resolve component: a-modal
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[Vue warn]: Failed to resolve component: a-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Edit-2

My source in browser is looking like this:

I am able to access the Vue but not antd. Why is that?

Original Q&A

There are 4 answers

**Walens** · Answer 1 · 2024-02-22T02:52:03+00:00

In the Ant Design Vue (antdv) documentation, there is a section explaining how to import it in the browser:

Import in Browser

Add script and link tags in your browser and use the global variable antd.

You need to add the global variable antd in app.use().

For example:

app.use(antd).mount('#app');

**Saravanan Nandhan** · Answer 2 · 2024-02-22T05:04:35+00:00

Ensure Correct CSS Link that the version of the Ant Design Vue CSS file matches the version of the Ant Design Vue script. In your code, both are set to 3.2.20, which is good.

Vue Version Compatibility Make sure that the version of Vue (3.2.31 in your case) is compatible with the version of Ant Design Vue you are using (3.2.20). As of my last update, this should be compatible.

<!DOCTYPE html>
<html>

<head>
  <title>Auto Refresh Page</title>
  <script src="https://unpkg.com/[email protected]"></script>
  <link href="https://unpkg.com/[email protected]/dist/antd.min.css" rel="stylesheet">
  <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
</head>

<body>
  <div id="app">
    <a-button type="primary" @click="showAlert">Show Modal</a-button>
    <a-modal v-model:visible="showModal" title="Basic Modal" @ok="handleOk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          moduleLoaded: false,
          currentRecordModule: null,
          backgroundProcess: false,
          showModal: false
        };
      },
      methods: {
        init() {
          // Placeholder for your module loading logic
          this.moduleLoaded = true;
          this.currentRecordModule = {}; // Set your module object here
        },
        reloadPage() {
          location.reload(true);
        },
        showAlert() {
          this.showModal = true;
          // Additional logic for showing alert
        },
        handleShowBackgroundProcessAlert(event) {
          if (event.target.id === 'showBackgroundProcessAlert') {
            this.showAlert();
          }
        },
        handleOk() {
          this.showModal = false;
        }
      },
      mounted() {
        console.log('App mounted');
        this.init();
        document.addEventListener('click', this.handleShowBackgroundProcessAlert);
      }
    }).mount('#app');
  </script>
</body>

</html>

Moved the Ant Design Vue script to the head section: This ensures that the Ant Design Vue components are loaded before the Vue app is initialized.

**Meirkhan Yesseyev** · Answer 3 · 2024-02-22T05:50:37+00:00

Just want to extend @saravanan-nandhan's answer. Need to add additional components option in createApp with element specification.

const { createApp } = Vue;

createApp({
  components: {
    AButton: window['antd'].Button,
    AModal: window['antd'].Modal,
  },
  ...
}).mount('#app');

**Ishaq Kamran** · Answer 4 · 2024-02-22T14:48:01+00:00

I finally managed to resolve it. The issue was with the version compatibility of Vue and Ant Design, as well as the difference in the script providers. Previously, I used CDNJS for Vue and UNPKG for Ant Design. Now, I used CDNJS for both of them. This is what my final script looks like:

  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/2.2.8/antd.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/2.2.8/antd.min.css" rel="stylesheet">

TechQA.

How can I use Ant-design-vue using cdn?

There are 4 answers

Import in Browser

Related Questions in JAVASCRIPT

Related Questions in VUE.JS

Related Questions in ANTD

Related Questions in NETSUITE

Related Questions in ANT-DESIGN-VUE

Popular Questions

Popular Tags

Trending Questions