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'
],
})
Related
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',
}
],
}
}
})
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
Is it possible to create a css bundle with different loader options, based on the entry?
module.exports = {
entry: {
bundle1: './app.scss',
bundle2: './app.scss'
},
module: {
rules: {
test: /\.(css|scss)$/,
use: [
...,
{
loader: "sass-loader",
options: {
prependData: (entry) => `$value: ${entry.name === bundle1 ? 'foo' : 'bar'};`,
},
},
],
}
},
...
}
So with this setup basically I will create 2 bundle.css files, a bundle1.css and a bundle2.css, but I want to pass down different variables to my scss files based on each entry points. So the ideal would be something similar I wrote in the prependData, but I don't know if it's possible somehow.
Is there a way to generate pages from json/yaml if you provide a layout? I thought this was possible, but can't find in docs.
This is currently being tracked here in GitHub: http://webb.li/QjTX
Since the options.pages feature has been implemented, you can add pages like this:
options: {
pages: {
"about": {
"data": {
"title": "About"
},
"content": "Content for {{title}}"
},
...
}
}
We aren't supporting automatic loading of a json/yml file, but you can do this inside your Gruntfile and add the object to options.pages that way...
module.exports = function(grunt) {
grunt.initConfig({
// package.json
pkg: grunt.file.readJSON('package.json'),
assemble: {
options: {
flatten: true,
layoutdir: 'src/layouts',
assets: 'dest/assets'
},
blog: {
options: {
engine: 'handlebars',
layout: 'post.hbs',
site: {
title: 'This is my Blog'
},
pages: grunt.file.readJSON('pages.json')
},
files: { 'dest/': ['src/index.hbs'] }
}
}
});
// Load npm plugins to provide necessary tasks.
grunt.loadNpmTasks('assemble');
// Default task.
grunt.registerTask('default', ['assemble']);
};
This example uses the post.hbs file as the layout for any pages defined in the pages.json file. It will also build a page for the index.hbs specified in the files src array. Right now, the files dest/src is required so Assemble knows where to write the files, but I think we'll add that to the options, or the page object so it can be run without the files object.