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.
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.
I have created a SPA dashboard using Vue.JS and Laravel, and now would like to create a script that I can use in other sites I manage to just display the event data I am creating in the dashboard via the APIs I have made. I am using Laravel's webpack.mix to do my bundling. Thus far, I haven't really found anything for this situation that explains what I need to do. Any pointers would be helpful, and I can post my code, if I knew what code would be helpful. :)
I didn't entirely understand what you want to do but maybe this project will help. It's a Vue Component bundled using Laravel Mix and deployed to npm: https://github.com/niiknow/vue-datatables-net
I want to create a Vue component that has fairly large amount of html/css/js.
The goal is someone should be able to add this component to their website, and without having to write their own duplicate html/css they should see roughly the same on their website as it looks on mine.
I've made a component that I can use on my own website, but how can I make it available to use on other websites? Can people just include a .js file perhaps? But how would they import the html/css into a page?
You can prepare your component so that it can be packaged and published on NPM
maybe this post can help you to achieve that How To Publish Your Vue.js Component On NPM
Could you please explain what is the main difference between different Vue installation methods for building a one-page website (page routing) with Vue and an Electron app using Vue:
importing Vue.js library via <script>
installing it via Vue-CLI
This installation guide doesn't really help understand the difference.
Is my site / app going to work slower if I just import Vue via <script>?
The <script> include is for including the Vue library in your webpage just like you would any other JavaScript library. Vue will be available on the window object for you to access globally. All external JavaScript must be included like this one way or another, even if you use vue-cli.
vue-cli is just a tool which generates Vue projects from templates. The setup really depends on the template that you use; I imagine most people would probably use the webpack template for medium to large sized Vue projects. This will initialize a node project directory containing all files necessary to develop, debug, test and build a Vue project. Webpack takes care of bundling all modules into a single JavaScript bundle which is included into the webpage via <script>. You can also benefit from vue-loader which allows you to write Vue components in *.vue files.
Is my site / app going to work slower if I just import Vue via <script>?
I mean, not really, no (your development speed might be hindered though since you won't benefit from all the bells and whistles that vue-cli sets you up with). Your question applies more to the development approach that you will follow for developing a Vue web application.
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.