after i build the project
npm run generate
it generates a folder .output with the build files
how to change this file to anther, for example instead of .output -> Admin
my nuxt.config.ts
export default defineNuxtConfig({
ssr: false,
app: {
baseURL: ...,
},
});
I know that i can cut and past the folder,
however, is there a propriety that can change the path of the build?
The Nuxt3 server engine is actually powered by nitro (see the document)
so, in the nuxt.config.[js|ts]
export default defineNuxtConfig({
nitro: {
output: {
dir: '.output',
serverDir: '.output/server',
publicDir: '.output/public'
}
}
})
See more:
Nitro output
nuxt-config nitro
Related
I have a simple NextJs app.
When I'm running the app on a localhost everything seems to work fine - All the images are shown as expected
When I use this script: next build && next export
and browse to my local build, I don't see the images, but instead its "alt" text
The way I import an image:
import React from 'react';
import Image from 'next/image';
import someImage from '../../../public/images/some-image.png';
const Main = () => {
return (
<div>
<Image
src={someImage}
alt="Some Image"
placeholder="blur"
/>
</div>
}
next.config.js
/** #type {import('next').NextConfig} */
const configuration = {
reactStrictMode: true,
eslint: {
dirs: ['./src'],
ignoreDuringBuilds: true,
},
images: {
loader: 'akamai',
path: '',
},
};
module.exports = configuration;
My code design:
Environment:
"next": "13.1.6",
"react": "18.2.0",
Moreover, I tried to use a normal img tag and it causes the same problem.
If anyone here faces the same issue ill appreciate any help!
Refer to this page:
https://nextjs.org/docs/messages/export-image-api
You are attempting to run next export while importing the next/image component using the default loader configuration.
However, the default loader relies on the Image Optimization API which is not available for exported applications.
So, when running static NextJS app with export you cannot use NextJS optimization, as it should run in your non-existent server. You should use cloud solution (https://nextjs.org/docs/api-reference/next/image#loader-configuration) or remove optimization:
module.exports = {
images: {
unoptimized: true,
},
}
(https://nextjs.org/docs/api-reference/next/image#unoptimized)
When importing something statically from the public folder it already knows youre inside it. You only need the following import:
import someImage from 'images/some-image.png';
I am trying to set up a basic (css) library with vanilla TS and Vite 4.
I want to have a main js and css file at the top level so you can import the whole thing in one go. I also want to have component level imports where you can chose to just import the components js + css. The combined css and JS files are working fine; and the individual component JS file is working fine too.
Currently I'm running into the problem where I can't seem to keep an isolated version of the CSS files next to the JS files after bundling. My build is currently creating :
I've gone over the docs of both Vite and Rollup but I can't seem to figure out how to do the same to my CSS as I'm doing to my JS.
dist
--components
----button
------button.js
--main.css
--main.js
My preferred output would be:
dist
--components
----button
------button.js
------button.css
--main.css
--main.js
In my `main.ts` I'm importing:
import './style.scss'
import './tokens.scss'
import './components/button/button.scss'
vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path'
export default defineConfig({
build: {
cssCodeSplit: false,
manifest: true,
rollupOptions: {
output: {
assetFileNames: () => 'main[extname]',
}
},
lib: {
formats: ['es'],
entry: {
main: resolve(__dirname, 'src/main.ts'),
button: resolve(__dirname, 'src/components/button/button.ts')
},
name: 'CSSFramework',
fileName: (_, fileName) => fileName === 'main' ? '[name].js' : 'components/[name]/[name].js',
},
},
});
Thanks in advance !
i am using styled-component in my next js app.
and for using it i had to add a babel file with this code:
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
i want to use local font and i did it according to the document https://nextjs.org/docs/basic-features/font-optimization.
but problem is here that after using local font the app errors.
it errors that you have to use initial babel.
how can i use both styled-component and local font?
With the release of Next.js 12 you can use styled-components without additional plugins.
Just add styledComponents: true in your next.config.js
const nextConfig = {
...rest of your config,
compiler: {
styledComponents: true,
},
};
module.exports = nextConfig;
A related issue on GitHub
everyone.
This is my first time here, and I apreciate your helps.
I'm new with Vuejs, student actually.
Overview:
I'm trying build a plugin component to show simple notifications.
Then I'm using Vue3 and vite. I created a demo and run npm link to test in local.
Problem:
In my demo project when I run npm run dev everything working correctly, but when I run npm build something stop working in my plugin componet. I found that v-for is not working inside of my plugin component, in my demo project it's working normal. I think could be some setup in my vite.config to render it correctly.
This is my vite config:
// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/index.js'),
name: 'Vue3SimpleNotification',
// the proper extensions will be added
fileName: (format) => `vue3-simple-notification.${format}.js`,
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue'
}
}
}
} ,
plugins: [vue()]
})
I'm trying to run a completely separate css/sass build to a specific file.
So I have a folder in my src like:
/src
/sass
./index.sass
./btn.sass
./etc.sass
I'm trying to get it to output to a specific file like "build.css" or whatever which would just end up in the default build directory of "dist" as "dist/build.css".
Been trying to play with vue.config.js and chainWebpack but totally lost here.
Any suggestions how to accomplish this?
One way to do this is to add a Webpack entry that points to the Sass file you want to bundle (using configureWebpack.entry):
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
⋮
configureWebpack: {
entry: {
app: './src/main.js',
extCss: './src/sass/index.sass', 👈
},
},
})
This has a downside as it also generates a .js file that is effectively a no-op. You'd have to delete that manually as a cleanup step:
dist/css/app.css
dist/css/extCss.css # CSS bundle of Sass output
dist/js/app.js
dist/js/chunk-vendors.js
dist/js/extCss.js # no-op file (delete me)
Also delete the <script src="/js/extCss.js"></script> from dist/index.html.