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',
}
],
}
}
})
Related
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?
Wassup Guys,
I am currently working on an anime page.
However, I have NUXTJS3 as setup together with Tailwinds Css.
My problem is, that when someone is accessing the page directly, the content is not loading.
Getting redirected with < NuxtLink > works, check the screeshots below.
nuxt.config.js
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
build: {
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
},
css: [
"~/assets/css/tailwind.css",
'~/assets/scss/main.scss'
],
})
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.
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
Developed as nuxt.js.
I want to implement a slider. I want to use bxslider.
From nuxt.config.js
head: {
script: [
{type: 'text / javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'},
{type: 'text / javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js'},
],
link: [
{rel: 'stylesheet', type: 'text / css', href: '//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css'},
],
}
I have called bxslider.
In the vue component,
mounted () {
$('.bxslider').bxSlider()
}
The following error occurs.
[Vue warn]: Error in mounted hook: "TypeError: $ (...). BxSlider is not a function"
TypeError: $ (...). BxSlider is not a function
Is there a way to solve this?
Take a look at documentation https://nuxtjs.org/examples/plugins
in nuxt.config.js file
module.exports = {
build: {
vendor: ['bxslider']
},
plugins: [
// ssr: false to only include it on client-side
{ src: '~/plugins/bxslider.js', ssr: false }
]
}
and in plugins folder create bxslider.js file and do the following
import Vue from 'vue'
import bxslider from 'bxslider'
Vue.use(bxslider)