在 nuxt.js 页面中包含外部 javascript 文件 [英] Include external javascript file in a nuxt.js page
问题描述
我有一个相对简单的问题.
我正在尝试在 Nuxt.js 中实现此代码笔中的小部件.>
这是我的代码，如果我使用 RAW HTML，它可以正常工作:
<头></头><身体><dev-widget data-username="saurabhdaware"></dev-widget><script src="https://unpkg.com/dev-widget@1.0.3/dist/card.component.mjs" type="module"></script></html>但是当我尝试在我的 nuxt.js 项目中包含这个开发小部件时，在我的一个页面中，它不起作用.
这是我的代码:
<div class="容器"><div><dev-widget data-username="saurabhdaware"></dev-widget><脚本>导出默认{布局:默认"，};<script src="https://unpkg.com/dev-widget@1.0.3/dist/card.component.mjs" type="module"></script>
我不断收到错误消息:
未知的自定义元素:<开发小部件 >知道我在这里做错了什么吗?
您需要在 nuxt.config.js 中添加您的脚本.这是它应该是什么样子
导出默认{模式:'通用'，/*** 页面标题*/头: {title: '你的头衔',元:[{字符集:'utf-8'},{name: '视口',内容:'宽度=设备宽度，初始比例=1'}],关联: [{rel: '样式表',href: 'css/mystyles.css'}],脚本: [{类型:'模块'，src: 'https://unpkg.com/dev-widget@1.0.3/dist/card.component.js'}]},/*** 自定义进度条颜色*/加载:{颜色:'#fff'},/*** 全局 CSS*/css: [],/*** 在安装应用程序之前加载插件*/插件:[]，/*** Nuxt.js 开发模块*/构建模块:[]，/*** Nuxt.js 模块*/模块:[]，/*** 构建配置*/建造: {}}I have a relatively simple question.
I am trying to implement the widget from this codepen in Nuxt.js.
Here's my code, which works fine if I use RAW HTML:
<!DOCTYPE html>
<html>
<head></head>
<body>
<dev-widget data-username="saurabhdaware"></dev-widget>
<script src="https://unpkg.com/dev-widget@1.0.3/dist/card.component.mjs" type="module"></script>
</body>
</html>
But when I try to include this dev widget in my nuxt.js project, in one of my pages, it does not work.
Here is my code:
<template>
<div class="container">
<div>
<dev-widget data-username="saurabhdaware"></dev-widget>
</div>
</div>
</template>
<script>
export default {
layout: "default",
};
</script>
<script src="https://unpkg.com/dev-widget@1.0.3/dist/card.component.mjs" type="module"></script>
I keep getting an error:
Unknown custom element: < dev-widget >
Any idea what I am doing wrong here?
You need to add your script in nuxt.config.js. Here is how it should look like
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: 'Your title',
meta: [{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
}
],
link: [
{
rel: 'stylesheet',
href: 'css/mystyles.css'
}
],
script: [
{
type: 'module',
src: 'https://unpkg.com/dev-widget@1.0.3/dist/card.component.js'
}
]
},
/*
** Customize the progress-bar color
*/
loading: {
color: '#fff'
},
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js dev-modules
*/
buildModules: [],
/*
** Nuxt.js modules
*/
modules: [],
/*
** Build configuration
*/
build: {}
}
这篇关于在 nuxt.js 页面中包含外部 javascript 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
