Using ant design vue in html

Question

Using ant design vue in html

220 views Asked by Omid At 21 September 2024 at 05:19

How to use ant design vue in html.

I tried to get this library with npm and got access to these files antd.js, antd-with-locales.js.map, antd.js.map, antd-with-locales.min.js, antd. min.js, antd-with-locales.min.js.LICENSE.txt, antd.min.js.LICENSE.txt, antd-with-locales.min.js.map, antd.min.js.map, reset. css, antd-with-locales.js. I tried to enter them into the code with the script tag, but I get an error in the console. This is my code:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/reset.css">
    <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></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>
    <title>My first ant design vue page</title>
</head>

<body>
    <template>
        <a-button>Add</a-button>
    </template>
    <script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
    <script>
        import { Button } from 'ant-design-vue';
        const ButtonGroup = Button.Group;

        export default {
            components: {
                AButton: Button,
                AButtonGroup: ButtonGroup,
            },
        };
    </script>
</body>

</html>

And this is my error:

Uncaught SyntaxError: Cannot use import statement outside a module (at first.html:24:9)

Original Q&A

There are 1 answers

**gre_gor** · Accepted Answer · 2023-10-15 14:16:22

You are trying to use it as Single File Component (*.vue), which requires a build step, which makes files usable for the browser.

If you want to use the library directly in the browser, you need to use the global antd variable.

const { Button } = antd;
const ButtonGroup = Button.Group;

Vue.createApp({
  components: {
    AButton: Button,
    AButtonGroup: ButtonGroup,
  },
}).mount("#app");

<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/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/reset.css">
<div id="app">
  <a-button>Add</a-button>
</div>

Instead of manually including components, you can just extract all of them from the antd variable. And you probably want to register them globally, so they are available in your custom components, without explicitly including them individually.

const app = Vue.createApp({
  data: () => ({
    "text": "",
  }),
});
Object.values(antd).forEach(o => {
  if (typeof o == "object" && o.name) {
    app.component(o.name, o);
  }
});
app.mount("#app");

<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/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/reset.css">
<div id="app">
  <a-button-group>
    <a-button @click="text = 'A'">A</a-button>
    <a-button @click="text = 'B'">B</a-button>
    <a-button @click="text = 'C'">C</a-button>
  </a-button-group>
  <a-alert v-if="text" show-icon :message="text"></a-alert>
</div>

For serious work with Vue (and Ant Design), you should look into how to use *.vue files with vite.

TechQA.

Using ant design vue in html

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in VUE.JS

Related Questions in ANT-DESIGN-VUE

Popular Questions

Popular Tags

Trending Questions