What is the difference between
nuxt build
vs
nuxt generate
vs
nuxt build --spa
I am trying to compile three different variations:
1. regular nuxt with ssr
2. prerendered spa
3. spa without prerendering
I am struggling to find the appropriate commands for it
As shown in the docs, the above commands correspond to:
nuxt build: Build your application with webpack and minify the JS & CSS (for production).
nuxt generate: Build the application and generate every route as a HTML file (used for static hosting).
The --spa flag doesn't seem to be covered in the docs themselves, however the generator help outlines, without further explanation:
Options
--spa Launch in SPA mode
Given this information, it would seem the following commands should cover your needs, however I haven't tested them myself at the moment:
Regular Nuxt with SSR: nuxt build
Prerendered SPA: nuxt generate
SPA without prerendering: nuxt build --spa
Take all of this with a grain of salt, however, as the Nuxt team is notorious for having out-of-date documentation.
Related
if you set ssr: false in nuxt.config.js file, does this make nuxt work exactly same as plain Vue application?
if so, doing npm run build, npm run start will just serve static html/css/js file with node.js server?
Am I right here?
Yeah, that will make Nuxt behave like Vue for the rendering part.
Be sure to have generate for an SSG target and not build (for SSR).
Here are more details of the benefits of still using Nuxt: https://stackoverflow.com/a/74714106/8816585
If you're doing npm run build, it's supposing that you're using your Nuxt app as SSR. Which means pretty much nothing since you don't want SSR (false).
It's like saying
I want a tomato sandwich, but without the tomato.
In the current situation, Nuxt3 will probably give you a sandwich but without tomatoes aka SPA-only Nuxt3 generated as SSG. Totally hostable as any other regular SPA app, on Netlify.
Official source: https://nuxt.com/docs/getting-started/deployment#client-side-only-rendering
Also, what Nuxt is doing during local development and on production are 2 different things.
You will always have a Node.js server running for dev, but that is not the case once deployed (SSG, SPA, etc...).
If you want a Nuxt3 SSR'ed app, use build + ssr: true.
From the nuxt3 document
ssr - Disables server-side rendering for sections of your app and make them SPA-only with ssr: false
What I understand from the doc
When SSR is false and use npm run build
If you make ssr: false and build the project not generate, then It will work like a simple vue spa application. Like a traditional spa application, it will load the whole js in the initial load and then render in the client site.
When SSR is false and use npm run generate
Again if you make ssr: false and generate the project not build, Then it will prerender all the pages and generate the static file. And it will work like a traditional static website. But you have to be careful that as SSR is false it will not prefetch any data it needs in the generated time. So It's best to generate pages with SSR mode on.
Recently I migrated my web application to Vue 3 which is implemented with Vue 2 earlier. This app is using as a web component for other websites with different frameworks. In vue 2 once the application is build as web component it is nicely generating the the compressed version of js files and can add to other website direcly. In vue 2 I used below command to build the web component.
vue-cli-service build --target wc --name widget-v2 ./src/components/EntryComponent.vue
It is generating the js files and we can simply import that files to other website and add the web component tag like : <widget-v2></widget-v2> to html and it works.
But once I migrated the app to Vue 3 when I try to build the app as web component it is showing the below error.
I search through internet and found out we have to change the build command like below.
vue-cli-service build --target lib --name widget-v3 src/components/EntryComponent.vue
But the issue is once the js files are generated and when I import the js to other web page and add the tag same as easier it does not work.
I checked the demo.html how the widget added in there. But it is different from earlier than Vue2 version which is added like this. But we can pass props in this method which I tried and generated errors.
My question is how can we add the web component as simply as in Vue 2 when we use Vue 3.
I have a Nuxt 2 app. I'm following the docs to add Capacitor and Android Support.
Everything is fine up to the point of running npx cap add android. The android folder is generated however there are errors in the terminal
√ Adding native android project in android in 342.51ms
√ Syncing Gradle in 944.40μp
√ add in 345.44ms
× copy android - failed!
[error] The web assets directory (.\.nuxt) must contain an index.html file.
It will be the entry point for the web portion of the Capacitor app.
√ Updating Android plugins in 33.68ms
× update android - failed!
[error] Error: ENOENT: no such file or directory, open
'<sourceroot>\android\app\src\main\assets\capacitor.plugins.json'
I’m not running Nuxt in static mode (due to routes and content pulled in dynamically from a CMS). So I run nuxt build which generates the output into a folder named .nuxt by default.
However nuxt build doesn’t create an index.html as an entry point, the nuxt build actually states Entrypoint app = server.js server.js.map. Hence the error above where it can’t find index.html in the .nuxt directory.
Does anyone know a way to resolve this? Or have implemented Capacitor with a Nuxt SPA?
I’ve found resources when using nuxt generate for a static app but not nuxt build for a spa like in my case.
I have a Nuxt2 web app with servers (app server and separate API server), also deployed as an Android app on the Play Store (in alpha testing). Both app flavours look and behave identical and use the same API server, as I desire.
IMHO, in the lifetime of your (universal) app, BOTH build and generate will get leveraged:
build, likely by whatever web app host you use (ie AWS, Heroku, etc), during deployment of the web app.
generate by yourself, when you're ready to submit to the app stores (Apple, Google, etc), making use of Capacitor.
Let's say you have a new feature to add to the app. On that day, you make git commits and increment your version number and when you're ready to deploy the update...
For the web app...
Make commit(s) and version number change
Deploy to your app host, which for most people, will also run the build step for you
The only time I ever run build locally is when I need to make final tests, troubleshoot bugs or make optimizations (e.g. lower final package size).
For the Android or iOS apps...
Make commit(s) and version number change
nuxt generate
Run Capacitor sync (however which way you do it (for me I use: npx cap sync)
Prepare the app store build & submit (however which way you do it)
What nuxt generate does for you, and what Capacitor needs, is a fully rendered snapshot of all your app views together, all at once. It's the equivalent of a web app user opening all your app's views all at once (e.g. 50 browser tabs), pulling all components/styles/etc into their local browser. This fully rendered app state ultimately gets bundled and is what will get submitted to the app store(s).
In Nuxt docs and terminal output, they seem to strongly suggest that if you're using nuxt generate, that you want to be using target: static, however I will say you should completely ignore this advice. Static is what you'd consider if you had a "brochureware" website or some recipe book app that you update once-in-awhile. It goes as far as in the terminal output of nuxt generate, even if I have target: server defined, you'll still see a line saying something along the lines of "Outputting for target static...". Just ignore it.
There is hardly anything static about a typical universal web app.
I personally use target: server with nuxt generate and I haven't seen any problems in the app (web or Android version).
I created a vue project using the vue cli:
vue create myproject
I figured that the output when I do npm run build will be a single page application (SPA). What do I need to produce a static website (SSG / Jamstack) with my existing code? I know I could easily do it with Nuxt, but I would like to know how to do it without Nuxt.
EDIT: I think what I meant was to have some of the pages pre-rendered so that it's better for SEO.
To be clear, the result of your build is a SPA that is static HTML and JS. The user may see dynamic content based on the JS, but it's essentially static and could be deployed to Jamstack hosts like Netlify or Vercel. In other words, unless I'm misreading what you want, there isn't anything special you need to do.
I'm using webpack on the server and want to bundle only one page that is compiled with nextJS.
Right now, the directory structure consists of several pages like:
app
about
contact
Is there any way to compile just the app directory, that is, compiled with NextJS? I'm using express to run the app and have access to the paths I need for the page