Develop Reference

nuxtjs 3 add external javascript

I tried to add an external javascript file to nuxt.config.ts.
but nuxt didn't load the file.
nuxt.config.ts file:
export default defineNuxtConfig({
css: [
'bootstrap/dist/css/bootstrap.min.css'
],
script: [
{
src: 'script.js',
}
],
vite: {
define: {
'process.env.DEBUG': false,
},
}
})

The correct way to load scripts in Nuxt 3 is by using the head object in app (See more in Official Docs here)
In your case, This should work.
export default defineNuxtConfig({
app: {
head: {
link: [
{ rel: 'stylesheet', href: 'bootstrap/dist/css/bootstrap.min.css' },
],
script: [{ src: 'script.js' }],
},
},
vite: {
define: { 'process.env.DEBUG': false },
},
});
head contain meta, script, link, style and no-script tags, so if you want to write any of them you'll use the same approach

I tried many ways and this is the only way it's worked.
export default defineNuxtConfig({
css: [
'#/css/bootstrap.rtl.min.css'
],
app: {
head: {
script: [
{
src: '_nuxt/js/bootstrap.bundle.min.js',
}
],
}
}
})

popup.html file not included inside chrome extension build using vite

I'm using this github cli plugin to scaffold mv3 chrome extensions using vue and vite.
The template is created correctly and I'm able to work on it, but I have a problem when I want to use the chrome.window.create or chrome.tabs.create, when I run the build command the final folder will not contain the popup.html file, it will be bundled only if is used inside the manifest.js file that is used to generate the build
This is the manifest configuration
import { defineManifest } from '#crxjs/vite-plugin'
export default defineManifest({
name: '',
description: '',
version: '1.0.0',
manifest_version: 3,
icons: {
16: 'img/logo-16.png',
32: 'img/logo-34.png',
48: 'img/logo-48.png',
128: 'img/logo-128.png',
},
//If I uncomment popup will be included but tabs and popup windows will not work
action: {
// default_popup: 'popup.html',
// default_icon: 'img/logo-48.png',
},
//options_page: 'options.html',
background: {
service_worker: 'src/background/index.js',
type: 'module',
},
content_scripts: [
{
matches: ['http://*/*', 'https://*/*'],
js: ['src/content/index.js'],
},
],
host_permissions: [
'https://*.herokuapp.com/*'
],
web_accessible_resources: [
{
resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
matches: [],
},
],
permissions: [
'tabs',
'gcm',
'identity',
],
oauth2: {
"client_id": "...cd.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/userinfo.profile"
]
}
})
And this is the vite code I have
import { defineConfig } from 'vite'
import { crx } from '#crxjs/vite-plugin'
import vue from '#vitejs/plugin-vue'
import manifest from './src/manifest.js'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const production = mode === 'production'
return {
build: {
emptyOutDir: true,
outDir: 'build',
rollupOptions: {
output: {
chunkFileNames: 'assets/chunk-[hash].js',
},
},
},
plugins: [crx({ manifest }), vue()],
}
})
How I can fix the build to include the popup.html page or any custom html page I can need?

MDX not exporting/importing js files as expected

I am attempting to load a .js file into my markdown file in React using gatsby-plugin-mdx. However, I am running into an import error, which shows as a WARN as follows:
warn ./.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir/7cd2ab5f9fe4b662b5bb93052ee9e
f2c.js
Attempted import error: 'Test2' is not exported from '../../../../src/pages/test2'
(imported as 'Test2').
Looking at the cache, it seems benign enough:
import { Test2 } from "../../../../src/pages/test2";
import * as React from 'react';
export default {
Test2,
React
};
The contents of the import seem arbitrary, and the warn will be the same (and contents will not load). I used a simple export default function returning a h1 tag to experiment, for example.
My .md file is fairly straight forward:
# Testing 1
top
import { Test2 } from "../pages/test2"
<Test2 />
bottom
I suspected this is a configuration issue, but I'm yet to resolve it in my gatsby-config.js, which is currently as the following:
module.exports = {
siteMetadata: {
title: 'Marco Sousa Blog',
author: 'Marco Sousa'
},
plugins: [
'gatsby-plugin-dark-mode',
'gatsby-plugin-react-helmet',
'gatsby-plugin-sass',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-source-filesystem',
options: {
name:'src',
path: `${__dirname}/src/`
}
},
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
'gatsby-remark-relative-images',
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 750,
linkImagesToOriginal: false
}
},
{
resolve: `gatsby-remark-katex`,
options: {
// Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
//strict: `ignore`,
}
},
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: true,
noInlineHighlight: false,
languageExtensions: [
{
language: "superscript",
extend: "javascript",
definition: {
superscript_types: /(SuperType)/,
},
insertBefore: {
function: {
superscript_keywords: /(superif|superelse)/,
},
},
},
],
prompt: {
user: "root",
host: "localhost",
global: false,
},
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
}
},
]
}
},
{
resolve: "gatsby-plugin-page-creator",
options: {
path: `${__dirname}/src/`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.mdx`, `.md`],
},
},
],
}
I think my querying/slug usage is fine, as the site and posts are operable prior (and after) to attempting to implement mdx. Observing the gatsby-plugin-mdx docs, I attempted to use gatsbyRemarkPlugins to encapsulate the other plugins, but this did not change the warn. What, more exactly, do you think could be the problem with my mdx usage?

This issue was in the way I imported. I simply changed
import { Test2 } from "../pages/test2"
<Test2 />
to
import Test2 from "../pages/test2"
<Test2 />
Test2.js was not a named export/import as I had imagined. Rather
Test2.js used the default export, which does not need to be wrapped with curly braces.

Href and src generated by Nuxt in static site are not properly linked to js files after nuxt generate [duplicate]

Does someone know why this happens? If I run nuxt locally (server) it works fine, but whenever I run yarn generate and load the index.html file in my browser all content between <client-only> tags disappear.
My nuxt config file:
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: true,
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'Site name',
htmlAttrs: {
lang: 'nl'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Description
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'preconnect', href: "https://fonts.gstatic.com"},
{ href: 'https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&family=Open+Sans+Condensed:wght#700&display=swap', rel: 'stylesheet'}
],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["#/assets/css/hamburgers.scss"],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
'#nuxtjs/fontawesome',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
],
styleResources: {
scss: [
"assets/css/variables.scss",
"assets/css/hamburgers.scss",
]
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}

Okay I've got it to work.
Javascript wasn't working properly because the files weren't linked correctly when I open index.html.
Because index.html is in a local folder somewhere on my PC, it searches for the javascript files on the root of the machine (where they don't exist).
I tested this locally on an Apache server with XAMPP and the same problem ocurred when I put the dist content generated by yarn generate in a subfolder so the URL would be localhost/subfolder.
The fix for this specific problem in this context would be to add to nuxt.config.js this:
router: {
base: '/subfolder/'
},
In the end this solution was not neccesary for me because when I were to host this on an actual Apache server and would put the files in the root directory so then the router property isn't needed unless I would put it there in a subfolder.
Earlier related questions from me:
Click events in Nuxt don't work after generating static site
Href and src generated by Nuxt in static site are not properly linked to js files after nuxt generate

Adding Vue to existing old website, removing the div instead of displaying old html

im trying to wrap my old website with Vue, so all the old jQuery scripts should still run and all the old HTML should display, however for some reason the el and everything inside it is being removed.
This is when using the webpacked version of the script, so for example:
<html>
<head></head>
<body>
<div id="wrapper">
<p>dsadfasfasfasfas</p>
<p>dfasdsadasdasdas</p>
</div>
</body>
<script src="/assets/js/app.min.js"></script>
</html>
Would display nothing within the body tag. But if I import Vue at the top of the website, and put the below code in place of the webpacked version it works fine!
window.app = new Vue({
el: '#wrapper',
data: {
test: 'hello world'
},
created() {
console.log('Vue Running');
}
});
Edit
Also this is the app.js which gets compiled:
import Vue from 'vue';
// window.EventBus = new Vue();
window.app = new Vue({
el: '#wrapper',
data: {
test: 'hello world'
},
created() {
console.log('Vue Running');
}
});
Edit
Here is my webpack.config.js:
const path = require('path');
module.exports = {
mode: 'production',
entry: [
'./resources/js/vue/app.js'
],
output: {
filename: 'app.min.js',
path: path.resolve(__dirname, 'public_html/assets/js/vue')
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
};
Edit 2
Just removed the import vue from 'vue', and imported it using the normal script src=... way and it works. I was under the impression if I import vue and compile then this would include vue in my website?

That's because your Webpack config is incomplete.
If you'd open browser console, you'll see there:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
Your html in #wrapper is a template, but Vue can't compile (and use it), because your build includes runtime-only version of Vue.
Simply add this to webpack.config.js:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
},
That will include runtime+compiler build of Vue.

The default build exported by the NPM package is the runtime-only build. It doesn’t bring the template compiler. So you would either need to import the full build version of vue in your javascript or create a webpack alias (if you are using webpack).
This issue won't occur when you define templates with the render function or Single File Component.
NOTE:
You don't need babel-loader if you dont expect to support older browsers and if you dont use latest ES features and you won't need vue-loader if you are not using Single File Components.
Also note that you must include the meta tag in your HTML <meta charset="utf-8">
This would work -
// webpack
module.exports = {
mode: "production",
entry: ["./app.js"],
output: { filename: "./app.min.js" },
resolve: { alias: { vue: "vue/dist/vue.js" } },
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader"
},
{
test: /\.vue$/,
use: "vue-loader"
}
]
}
};
// app.js
import Vue from "vue";
// OR You do this if you dont want to use webpack alias
// import Vue from 'vue/dist/vue.js';
window.app = new Vue({
el: "#app",
data: { message: "Hello Vue!" },
created() {
console.log("<><><> Vue Created");
}
});
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script src="app.min.js"></script>
</body>
</html>

Ok so,
It's normal because your compiled version looks like this:
import Vue from 'vue';
// window.EventBus = new Vue();
window.app = new Vue({
el: '#wrapper',
data: {
test: 'hello world'
},
created() {
console.log('Vue Running');
}
});
But how the browser know how to import 'vue' ?
Your compiled version is not browser ready,
I think your build configuration is not correct
Can you provide it ?