Related
I recently deployed our Docusaurus site for the first time and I am running into a weird issue with routing.
Every page in the /docs folder will briefly render the 404.html page when hitting the page directly. However, if I click around in sidebar the pages render properly.
This only happens in the /docs folder. If I click on the home page link I do not see the 404.
I cannot replicate this issue locally. I have tried both yarn start and yarn build/serve and in both cases the app works fine. I do not see any 404s, console errors, etc. The response payload of the 404 is the OOTB Docusaurus page, I have not done any customization to it or how its handled.
Attached is a gif showing the behavior and a screen shot showing that the browser is seeing a hard 404 in my non-localhost environment.
And here's my config file:
// #ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** #type {import('#docusaurus/types').Config} */
const config = {
title: 'Guidebook',
tagline: 'Engineering Information',
url: 'https://guidebook.our-internal-domain.tools/',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'throw',
favicon: 'img/favicon.png',
organizationName: 'Guidebook',
projectName: 'Guidebook',
presets: [
[
'classic',
/** #type {import('#docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
editUrl: 'https://git.our-internal-domain.com/tech-standards/tech-guidebook'
},
blog: false,
theme: {
customCss: require.resolve('./src/css/custom.css')
}
// debug: true
})
]
],
themeConfig: {
navbar: {
title: 'Home',
logo: {
alt: 'Home',
src: 'img/TechnologyGuidebook-Icon_Red_Small.svg'
},
items: [
{
type: 'doc',
docId: 'intro',
position: 'left',
label: 'Guidebook'
},
{
href: 'https://git.our-internal-domain.com/tech-standards/tech-guidebook',
label: 'GitHub',
position: 'right'
}
]
},
footer: {
style: 'dark',
links: [
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus'
}
]
},
{
title: 'More',
items: [
{
label: 'GitHub',
href: 'https://github.com/facebook/docusaurus'
}
]
}
],
copyright: `Copyright © ${new Date().getFullYear()} Guidebook V2, Inc. Built with Docusaurus.`
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme
}
}
};
module.exports = config;
I figured it out. It wasn't a Docusaurus problem. The problem was a configuration issue in our CloudFront infrastructure.
I am using Vercel to deploy a Docusaurus V2 website and was running into the same issue with redirects.
Fixed this issue by enabling cleanUrls inside my vercel.json config.
Logically, I have everywhere exposed that the dark theme is disabled. This can be viewed, for example, in the developer console: $vm0.$vuetify.theme.isDark, $vm0.$vuetify.theme.disabled, $vm0.$vuetify.theme.dark.
In the nuxt.config.js in the connections and settings section of vuetify, the following declarative code:
buildModules: [
['#nuxtjs/vuetify', {
theme: { disable: true },
treeShake: true,
defaultAssets: false,
icons: {
iconfont: 'md'
}
}],
// ...
]
Despite all this, the Vuetify components add the theme--dark class to the list of classes: html in the developer console.
As a result, all styles are redefined. White text on a white background, etc. How can I solve this problem?
Try something like this :
buildModules: [
// https://go.nuxtjs.dev/vuetify
'#nuxtjs/vuetify',
],
// Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
vuetify: {
theme: {
dark: false, <--- here
},
},
I am using Docusaurus i18n integration to add the language dropdown to site, but it shows weired
enter image description here
How can I handle this issue
Could you please elaborate a bit more on this?
This video is a detailed tutorial on how to translate your Docusaurus website and deploy it to Netlify. The video shows you all the steps, including how to add the language dropdown.
In short, you should be able to add a language dropdown to your site by simply adding the following code in docusaurus.config.js as explained here
module.exports = {
....
....
i18n: {
defaultLocale: 'en',
locales: ['en', 'fr'],
localeConfigs: {
en: {
label: 'English',
},
fr: {
label: 'Français',
},
},
},
};
Finally you can add the language dropdown by adding the following code in docusaurus.config.js:
module.exports = {
themeConfig: {
navbar: {
items: [
{
type: 'localeDropdown',
position: 'left',
},
],
},
},
};
I am trying to add ScollMagic in my Nuxt project, I followed this article: https://nuxtjs.org/guide/plugins & I've added ScrollMagic.js in nuxt.config.js and I got this issue: ReferenceError window is not defined.
module.exports = {
plugins: [
{ src: '~plugins/ScrollMagic', mode: 'client' }
],
}
Then I've added this snippet in my component:
import ScrollMagic from 'scrollmagic'
I still have this issue...
Even if cover it like this:
if (process.client) {
Vue.use(ScrollMagic)
}
I know this question is a bit old, but maybe someone will find my sulotion helpfull.
EDIT: Also, this way you can register any plugin to nuxt :).
So what I did:
1.
npm i scrollmagic
Go to nuxt.config.js and add the following to your plugins section:
{ src: '~/plugins/ScrollMagic.js', mode: 'client' }
This will make sure that scrollmagic will only be included in the client. This prevents the window undefined error.
Go to the plugins folder, or make it in your root folder and make a new file called ScrollMagic.js. In here add the following:
import Vue from 'vue';
import * as ScrollMagic from 'scrollmagic';
Object.defineProperty(Vue.prototype, '$scrollmagic', { value: ScrollMagic });
This snippet will make the variable $scrollmagic available in every component/page. You can call this.$scrollmagic to use it. For example const controller = new this.$scrollmagic.Controller();
Hope this helps anyone.
This is answering Drew Baker.
I think you are making it more complicated than it should be. Using GSAP with Nuxt is fairly simple.
npm install gsap in your terminal.
In the file you want to animate something, import gsap. In the script tag: import { gsap } from 'gsap'.
use GSAP like you're used too. const lt = gsap.timeline();.
If you still want to use GSAP as I explained in the other comment:
Follow the steps 1 & 2 from the other comment.
In step 3 of the previous comment, create a file called 'gsap.js' in there import Vue and GSAP.
import Vue from 'vue';
import { gsap } from 'gsap';
Object.defineProperty(Vue.prototype, '$gsap', { value: gsap });
Hope this helps you #Drew Baker!
currently what works is to use the cdn and integrate in 'nuxt.config.js'.
Like this :
head: {
...
script: [
{
src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js",
async: 'async',
ssr: false,
defer: true,
body: true,
},
{
src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js",
async: 'async',
ssr: false,
defer: true,
body: true,
},
] },
in the component :
export default {
mounted () {
if (process.client) {
var controller = new ScrollMagic.Controller()
var scene = new ScrollMagic.Scene({ triggerElement: '#trigger1' })
// exemple : trigger animation by adding a css class
.setClassToggle('#animate1', 'zap')
.addIndicators({ name: '1 - add a class' }) // add indicators (requires plugin)
.addTo(controller)
}
}}
you can use this method for other puglins that wouldn't work on nuxt by using npm or [puglins]
use the cdn and integrate in 'nuxt.config.js'.
script: [
{
src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js",
async: 'async',
ssr: false,
defer: true,
body: true,
},
{
src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js",
async: 'async',
ssr: false,
defer: true,
body: true,
},
{
src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js",
async: 'async',
ssr: false,
defer: true,
body: true,
},
] },
In component
Anim() {
if (process.browser && window) {
const ScrollMagic = window.ScrollMagic;
const bookTimeline = new TimelineMax({});
bookTimeline
.from(".hmbookservice-container", 0.6, {
yPercent: 20,
opacity: 0,
ease: Power4.easeOut,
clearProps: "all"
})
.from(
".hmservice-textwrap h4",
0.6,
{
xPercent: 20,
opacity: 0,
ease: Power4.easeOut,
clearProps: "all"
},
"-=.1"
)
.from(
".hmservice-btnwrap",
0.6,
{
xPercent: 20,
opacity: 0,
ease: Power4.easeOut,
clearProps: "all"
},
"-=.2"
);
const bookController = new ScrollMagic.Controller();
const bookAnimScene = new ScrollMagic.Scene({
triggerElement: ".hmbookservice-container",
reverse: false,
offset: -200
})
.setTween(bookTimeline)
.addTo(bookController);
}
}
mounted() {
if (process.browser && window) {
this.Anim();
}
}
For Vue / Nuxt projects you can use vue-scrollmagic plugin.
I am creating a new project using nuxt.js v2.3.0. When I run npm run dev in my IDE console everything compiles correctly but when I go to the page I get the following error: Nuxt.js + Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
Here is my nuxt.config.js file:
const pkg = require('./package');
module.exports = {
mode: 'spa',
dev: true,
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
bodyAttrs: {
class: 'h-100'
},
htmlAttrs: {
class: 'h-100'
}
},
/*
** Global CSS
*/
css: [
'#/assets/app.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
'~/plugins/vue-notifications',
'~/plugins/vue2-sidebar'
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
'#nuxtjs/axios',
// Doc: https://bootstrap-vue.js.org/docs/
'bootstrap-vue/nuxt',
// Doc: https://auth.nuxtjs.org/getting-starterd/setup
'#nuxtjs/auth',
'#nuxtjs/toast',
'#nuxtjs/font-awesome'
],
/*
** Axios module configuration
*/
axios: {
baseURL: 'http://users:8000'
},
/*
** Auth module configuration
*/
auth: {
strategies: {
password_grant: {
_scheme: 'local',
endpoints: {
login: {
url: '/oauth/token',
method: 'post',
propertyName: 'access_token'
},
logout: 'api/logout',
user: {
url: 'api/user',
method: 'get',
propertyName: false
},
},
tokenRequired: true,
tokenType: 'Bearer'
}
},
redirect: {
login: "/account/login",
logout: "/",
callback: "/account/login",
user: "/"
},
},
/*
** Toast configuration
*/
toast: {
position: 'top-right',
duration: 2000
},
loading: {
name: 'chasing-dots',
color: '#ff5638',
background: 'white',
height: '4px'
},
/*
** Router configuration
*/
router: {
middleware: ['auth']
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
};
If I was running in production mode then I could understand but I'm not. I would expect vue-devtools to be running as normal.
I had to add the following to the nuxt.config.js:
vue: {
config: {
productionTip: false,
devtools: true
}
}
Now devtools shows up
tl:dr:
vue.config.devtools = true in my nuxt.config.js does not work for me.
I ran nuxt generate --devtools, then nuxt start and opened the website in my browser. Doing so I could use the Vue-Devtools.
After that I now can still use the Vue-Devtools, even when running nuxt dev and no vue.config.devtools flag set in my nuxt.config.js
Full story
So enabling the devtools flag in vue.config as in the accepted answer did not work for me either.
I first tried forcing the Vue-Devtools as described here. Adding a Plugin to set the window properties as described in the link. But without luck.
Digging in the Nuxt code I noticed the --devtools flag for the generate command and wanted to see if the Vue-Devtools work at all with Nuxt.
After running nuxt generate --devtools, then serving the application with nuxt start, I finally could access the devtools.
And now, even when running nuxt dev they are still accessible. And I don't have vue.config.devtools set at all in my nuxt.config.js. Weird. But maybe that helps someone.
More context: I am running Nuxt in spa mode, with target static as I don't have a Node server in the Backend and just want to build an SPA.
As #joshua jackson stated worked for me, while devtools: true did NOT.
Version:
Nuxt.js v2.10.0
Vue v2.6.10
vue: {
config: {
productionTip: false,
devtools: true
}
}
in nuxt.config.js
export default {
mode: 'universal',
devtools: true,
...
}
Hope this help someone stopped here.
I have struggled to get this working and tried all of the steps written here.
My issue was I had to run the server on a specified port.
server: {
port: process.env.PORT || 5000,
host: '0.0.0.0'
},
Adding this to nuxt.config.js solved the problem.