I want to use 'npm run generate' in Nuxt project, but i have error:
Path C:/Users/Марина/OneDrive/Desktop/weHost/zabota-dialog/nuxt.config.js is not in cwd C:\Users\Марина\OneDrive\Desktop\weHost\zabota-dialog
Nuxt.config.js now in Project root directory. File contents:
export default {
// Target: https://go.nuxtjs.dev/config-target
target: "static",
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "dialog-zabota",
htmlAttrs: {
lang: "en"
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" }
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["./assets/less/main.less"],
styleResources: {
less: ["./assets/less/static/variables.less", "./assets/less/static/font-face.less"]
},
// 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: ["#nuxtjs/style-resources"],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {}
};
What i do wrong? Why it's not run?
Not sure how to fix it since I'm on an UNIX-based system but there is actually a difference
C:\Users\Марина\OneDrive\Desktop\weHost\zabota-dialog
vs
C:/Users/Марина/OneDrive/Desktop/weHost/zabota-dialog/nuxt.config.js
The slashes do not match, \ vs /. Did you do some specific configuration with your system?
This one may help: Nodejs absolute paths in windows with forward slash
Or any google query with npm backslash windows keywords.
I can recommend don't use cyrillic later in path
.Its help for me
I think its could happen because of non ASCII characters too. I'm using Windows in Turkish so there was a "/Masaüstü/" part on my path, I carried my folder to C:/src and problem fixed.
Related
I am using Nuxt 3 RC and based on this video and this so solution, I am trying to load the library splitting.js to Nuxt.
After following the steps I am still getting the following error
Uncaught (in promise) ReferenceError: Splitting is not defined
This is my nuxt.config.ts
import { defineNuxtConfig } from "nuxt";
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
head: {
title: "Nuxt RC 3",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "Nuxt.js project" },
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
href: "https://unpkg.com/splitting/dist/splitting.css",
},
{
rel: "stylesheet",
href: "https://unpkg.com/splitting/dist/splitting-cells.css",
},
],
script: [
{
src: "https://unpkg.com/splitting/dist/splitting.min.js",
type: "text/javascript",
},
],
},
css: [
'~/assets/css/main.css'
],
plugins: [
]
});
After moving the code to the layouts/default.vue layout, it's working, is there any specific reason why its not working when applied to the nuxt.config.ts file?
Installing it via NPM
npm i splitting
Then importing it like that
import "splitting/dist/splitting.css"
import "splitting/dist/splitting-cells.css"
import Splitting from "splitting"
Splitting()
fixed the issue.
It's recommended on pretty much every aspect to use an NPM package anyway (on modern frameworks).
Here is a more detailed explanation regarding Nuxt2 libraries, there may be some equivalent or similar approaches overall.
My app works perfectly in dev mode, however I'm facing issues in the production environment.
My Folder Structure is like this pages > widget > _id.vue
For testing I just put a h1 tag in _id.vue file, when I run enter the url - https://app.mydomain.com/widget/xyz I get 404 errors on all files.
https://app.mydomain.com/widget/hhhhh 404
https://app.mydomain.com/_nuxt/dist/bf9e34c.js net::ERR_ABORTED 404
https://app.mydomain.com/_nuxt/dist/eb32a87.js net::ERR_ABORTED 404
https://app.mydomain.com/_nuxt/dist/cc2d21b.js net::ERR_ABORTED 404
Here is my apps nuxt.config.js file code, unable to figure out what's the issue here:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
server: {
port: 8000 // default: 3000
},
target: 'server',
head: {
title: 'Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'my website description'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ href: '../assets/styles/style.css' }, { href: '../assets/styles/videoform.css' }, { href: '../assets/styles/tailwind-responsive.css' }, { href: '../assets/styles/tailwind-components.css' }
],
script: [
{ src: 'https://js.stripe.com/v2/' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
// <style>
// #import '../../assets/styles/style.css';
// #import '../../assets/styles/videoform.css';
// #import '../../assets/styles/tailwind-responsive.css';
// #import '../../assets/styles/tailwind-components.css';
// </style>
css: [
],
// 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/composition-api'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'#nuxtjs/axios',
],
axios: {
// proxy: true
},
// Build Configuration: https://go.nuxtjs.dev/config-build
buildDir: '_nuxt',
build: {
publicPath: '_nuxt/dist/'
}
}
When requesting those script files, nuxt uses the build.publicPath to find them. Your buildDir path tells nuxt to save the build files in _nuxt, while your build.publicPath tells nuxt that those files are located in _nuxt/dist. That's why you get a 404.
You can change the build.publicPath to match the buildDir to fix this. Or change the buildDir instead.
Nuxt Docs
Finally I figured out the problem, it was due to nginx configuration.
There was a trailing slash for the reverse proxy http://localhost:8000/
I had to remove that to fix the issue - http://localhost:8000
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.
I have js file called script.js in assets/js. Tried to include in nuxt.config.js like below:
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' }
],
script: [
{ src: '/assets/js/script.js', ssr: false }
]
}
But getting 'GET http://127.0.0.1:3000/assets/js/script.js 404 (OK)'.
Simply keep your script.js file into static folder, because static folder treat as root folder.
and add the path into nuxt.config.js configuration file like below
script: [
{ src: '/script.js'}
]
here is the best way that worked for me
put your script.js file in plugins folder and then go and include it in nuxt.config.js
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
'#/plugins/script.js'
],
remember that # in nuxt.js or vue.js means root folder
In this method, your js files must be in the path static folder
and add this code to you *.vue files you want to use
export default {
head() {
return {
link: [
{
rel: "stylesheet",
href:
"/assets/css/bootstrap.css"
},
],
script: [
{
src: "assets/js/bootstrap.js",
body: true
},
],
}
}
I am running a nuxt js application built with adonuxt. The app works just fine. But I see all pages are loading one by one and make the site a bit slow for the initial load. The site's interactivity doesn't work until all js chunk is not loaded.
So how can I make a one js file with all the pages.
Also I don't want to load the admin pages in the website. How can I separate this.
My nuxt config is like this..
'use strict'
const resolve = require('path').resolve
module.exports = {
/*
** Headers of the page
*/
env: {
baseUrl: 'https://savingfamilybazar.com/'
},
build: {
vendor:[ 'vue-product-zoomer']
},
modules: [
'#nuxtjs/axios',
],
axios: {
},
plugins: [
'~plugins/vuetify',
'~plugins/element',
{src: '~plugins/zoom', ssr: false}
],
head: {
title: 'my site',
meta: [
{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1.0'
},
{
hid: 'description',
name: 'description',
content: 'site.....'
},
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico',
},
],
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js' },
{ src: 'https://unpkg.com/#adonisjs/websocket-client' },
],
},
/*
** Global CSS
*/
css: [
//'~assets/css/main.css',
],
/*
** Customize the progress-bar color
*/
loading: { color: '#ffd451',height:'3px' },
/*
** Point to resources
*/
srcDir: resolve(__dirname, '..', 'resources')
}
Currently it loads like this
Well, code splitting the pages should make your page faster. Because each route loads only the files it needs.
So if you have all the pages in one bundle it will be even slower. Because you need to load everything on the initial load.
You should check if your hoster supports HTTP2. This should boost the speed.
However, if you want to disable the automatic code-splitting in routes you have to edit the config.
build: {
optimization: {
splitChunks: {
chunks: 'async',
}
},
splitChunks: {
pages: false,
vendor: false,
commons: false,
runtime: false,
layouts: false
},
}
https://nuxtjs.org/api/configuration-build#splitchunks
https://github.com/nuxt/nuxt.js/pull/3060