I am currently merging a project from server-side rendering to static page rendering. According to the docs since nuxt 2.13 You can set the target to static inside of nuxt.config and run nuxt generate. This is correctly generating an html file for each file within my pages folder, however my pages lack all the styles. I am not sure if this behavior is expected or if I am missing something. I am currently using scss and bootstrap for the project. Any help would be appreciated.
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"!
The Nuxt documentation (latest) states that for SPA you need to set ssr: false in nuxt.config.js. Also, every vue file in the pages folder is added to the router configuration, so you don't have to do this yourself. This is both correct and works perfectly, but there is something I really don't understand.
When I run npm run build (nuxt-ts build), it builds the production output of the project and puts in the dist folder (default). I was surprised to see that even though I configured it to be a SPA, it still generates HTML files for each vue file in the pages folder.
It happens with newly generated projects using npx nuxt-create-app as well.
What I'd expect is that it only generates one HTML file (which is index) when ssr is set to false and when I want a static app, I would use npm run generate or set target to 'static' to create HTML files per route.
Nuxt documentation also states this for the target property:
https://nuxtjs.org/docs/2.x/get-started/commands#target-server-default-value (builds output to dist)
https://nuxtjs.org/docs/2.x/get-started/commands#target-static (generates HTML per route)
All I have in my config is ssr set to false, so it should not generate static files (HTML) per page.
What am I missing here, or am I misunderstanding how this works?
Thanks in advance!
Remember that in a static setup, your visitors may arrive at your site via any of your page routes— not just index.html.
For example, they may access https://www.your-app.com/contact-us. If you do not have a contact-us.html file available, and you don’t have a server configured to handle this request (as is the case with universal mode), you’re gonna end up with a 404.
What happens in static mode is contact-us.html is served, which contains the minimum javascript necessary to hydrate your nuxt app, then SPA mode kicks in— giving you client-side navigation.
I finally finish my project and ready to deploy. I generate my html files with yarn generate then point my nginx config to the /dist file. But when I visit the site, it looks like the JS is not getting loaded. Is there a config that I'm missing?
Console.log shows about 6 of this. (I think that's the number of my components that is not being loaded)
SyntaxError: expected expression, got '<'
btw, only my footer and navbar component is visible on the page, probably because there's no js to it.
I'm using vue cli 3, Vuetify. My back-end programmer asked me that put my css, js, and img file in static folder for him. How can I do? I cannot find webpack.config.js file at vue cli 3. some guys said use vue.config.js file, but I still don't know how to solve this problem.
thank you.
this link is build result. I want to put css, img, js files in one static folder.
Take a look at Public Folder for Vue CLI 3. To quote the docs
Any static assets placed in the public folder will simply be copied and not go through webpack. You need to reference them using absolute paths.
All you would need to do is place your css, js, images in your public folder
I have a project where I have placed the external js files like jquery, datepicker etc in the 'static' folder. I am importing them in the index.html file.
It is getting picked correctly when the page is directly loaded. But when navigating to the page using $this.router.push('/dashboard') the javascript does not get picked up.
Not sure if I am missing something here