i am currently working in a Nuxt.js project and i'm trying the Pre Rendering option. I would like to change the format name of the files created when i launch nuxt generate... but i don't really now if this is even possible.
If my pages folder has these 2 componentes:
pages\
- page1.vue
- page2.vue
the default situation is that my dist folder will have these files after the generate command:
dist\
- page1
- index.html
- page2
- index.html
Would be possible to have this structure?:
dist\
- page1.html
- page2.html
I've tried to create my own router.js with my custom paths, using #nuxtjs/router module and it works in dev mode, but when i try to generate the static files, there are no errors... but it doesn't work. No page files in dist folder.
Perhaps i'm missing something, or perhaps it is not possible to do this, but... has anyone faced this situation?
Add generate.subFolders false in your nuxt config:
generate: {
subFolders: false
}
Related
I recently started learning NuxtJs and create a nuxt app using the nuxt3 template. The code i used to generate the starter project is
npx nuxi init nuxt-app
However the the terminal shows that the app has been created and the dev server also starts displaying the Nuxt3 welcome page. But when i load the directory in vs code the folders like pages,store and components are not visible as seen in the screenshot below .
You are importing <NuxtWelcome /> component from node_modules folder. Delete it and replace with <NuxtPages/>. Create your own components in folder pages. Nuxt 3 imports components by itself, so you don't see them in <script> tag. <NuxtPages /> will do the magic with components in page folder. For example, Index.vue component you will see in / home page and About.vue in /about.
This behavior is a year old already: Some of the directories are missing when I'm trying to create a new Nuxt js project
The idea is to have something minimal where you could then add all the needed directories.
Benefit being that if you don't use any pages, the final bundle will be smaller (no need to being in Vue router for example). Same for the store (no need to import Vuex/Pinia), server part etc...
It's less of a "you have everything from the start" and more of a "pick what you like the most"!
I'm using Nuxt 2.15.8 to generate static pages (migrating to Nuxt 3 is also an option for me if it solves the problem).
It works great when deployed in the root folder of the server but I need it to be served in a subdirectory, like:
https://my.domain.com/folder/subfolder
The problem is that the compiled HTML includes nuxt related assets like:
/_nuxt/123456789.js
which translates to:
https://my.domain.com/_nuxt/123456789.js which obviously fails as the file is in a subfolder, not in the root.
I tried using publicPath config and absolute paths but it is not an option for me as I have several environments with different URLs.
I need to generate static HTML files with relative paths in order to make sure my site works as expected in all the environments, agnostically from the server URL.
I was able to achieve it using Vite + Vue 3 but migrating to a new implementation is not an option, I need to achieve it using the current Nuxt implementation.
I tried using nuxt-vite https://vite.nuxtjs.org/ but was not able to achieve relative paths, I still get
/_nuxt/123456789.js
instead of
./_nuxt/123456789.js
../_nuxt/123456789.js
../../_nuxt/123456789.js
, etc
It seems like it's not supported in plain nuxt 2 but if you use nuxt-vite you can set vite.base to '' or './' in nuxt.config to make the paths relative.
Try this out:
export default defineNuxtConfig({
app: {
baseURL: '/mydir',
buildAssetsDir: '/mydir/_nuxt/',
},
Or just edit index.html manually...
I've read multiple articles and posts about the nuxt generate issues, but i couldn't find an answer. So I'm learning Vue & Nuxt. I've create a spa, and i'm trying to host it on my website (in a subfolder eg. http://mywebsite.com/subfolder/). It's a simple hosting website (shared server) so i'd like to generate a static website from my files.
I'm running nuxt generate , but when i move the dist folder generated in my subfolder, i'm getting erros :
GET http://mywebsite.com/_nuxt/5f51d97c56209053356b.js net::ERR_ABORTED 404 (Not Found)
Of course, the path should be
http://mywebsite.com/subfolder/_nuxt/5f51d97c56209053356b.js
How can i fix this? From what i've understand, i should add some lines in my nuxt.config.js file right? I've tried multiple combinations, but i can't make it work..
Allright so this was simple, i've finally found the answer in the docs. I've simply added in my nuxt.config.js file the following :
router: {
base: '/subfolder/'
}
So this is a project in Laravel with Vue+Vuetify frontend. I'm using Vue CLI. I have set Vue CLI's output directory to Laravel's public folder using vue.config.js, like this:
module.exports = {
configureWebpack: {
devtool: 'source-map'
},
devServer: {
proxy: 'http://localhost:8080/api/v1/',
},
outputDir: '../public',
indexPath: '../resources/views/index.blade.php',
}
This works. However mdi icons on the web page do not show. I understand that I need to add link tag <link href="https://cdn.jsdelivr.net/.../materialdesignicons.min.css" rel="stylesheet"> to the index file, but I don't know where do I add it. The index.blade.php is overwritten by the Build process every time.
Alternate path is to include that css file in the build process by installing npm package and adding a few lines to my main.js, but I'd rather avoid that since my output is already getting bigger.
Figured out soon after posting question. I'll post it here for my own record and for anyone else landing here.
The solution was simpler than I anticipated. Vue CLI uses contents of /public folder to generate build output. So the solution was to simply go to public/index.html and place the meta tag in there.
Note: In my case I created a Laravel project and then used Vue CLI to create a Vue project inside Laravel project folder, so my folder structure looked like this:
Laravel_Project
--app
--bootstrap
--...
--public
--Vue_CLI_Project
----src
----public
Note that there are two public folders: First one is in Laravel project's root directory, whereas the second one is inside Vue project's directory. We are talking about the second one here.
All,
Using Intellij IDEA Ultimate 14.1.4. and trying to add Bootstrap 3 code completion to my project. I've downloaded the Bootstrap 3 plugin.
My project structure looks like this ...
MyProject
- app
- views
index.html
- public
- css
- bootstrap.min.css
- ...
- server.js
When I try to type in a bootstrap class in index.html such as class="col-sm-2", code completion does not work.
However, if I were to move my public\css folder directly under my project folder like so:
MyProject
- app
- css
- bootstrap.min.css
- ...
Now code completion for Bootstrap works when typing in index.html. What gives?
It seems it may be the location of the html page that's causing the problem. I put an html file in both app/views/ and public/. The public directory's html file received code completion, while the app/views directory did not.