What is Reddit's opinion of Nuxt.js?

From 3.5 billion Reddit comments

Hi /r/webdev. I've been working on a website called CSS Playground for around 8 months now based around learning CSS with sliders. The main idea is that you can make these CSS Playgrounds (like pens on CodePen) which combine a HTML/CSS playground with interactive sliders which modify CSS values. You can then share these playgrounds with other people.

The example showed in the gif is a great example of all the possible values of using the CSS property box-shadow. You can find the box-shadow slider type thingies from this playground: https://css-playground.com/view/24

I finally feel comfortable enough to share it with /r/webdev but I could use some feedback as well. If you're curious, my app is developed with Nuxt.js with an ASP Core backend. Thanks for checking out my post!

Netlify has a lot of advantages, besides the easy form submission:

• is as easy as gets to deploy to
• free for low to medium traffic websites
• optimized for static sites
• has automatic cdn
• you can use your domain from the other provider with Netlify

Unless your sticking to the hosting of your other provider, because you already paid for it, I dont see any reason why you wouldnt switch to Netlify. And even if you did, its free.

Here a quick guide for Nuxt.js to deploy to Netlify:

https://nuxtjs.org/deployments/netlify/

Checkout nuxt - vue based rather then react but higher level then both and packages things up very nicly. There is also next and after for react.

There are multiple Vue static site generators:

• Nuxt
• VuePress
• Gridsome

VuePress out-of-the-box is focused more on documentation. I've been using Nuxt for multiple projects and love it. With Gridsome being inspired by Gatsby, I see it replacing Nuxt for me in the future.

Pick whatever works for you. There really is no right choice here.

You might consider some frameworks that build on top of vue or react like Nuxt.js or Next.js to help make things a bit easier.

Yeah... the webserver (apache or nginx) in a PHP stack is out front, and isn't going to load/pass to PHP for an image file. It's only going to send the file extension that is configured for to PHP files (usually .php, but however you set it up...you could have it handle more) to the PHP interpreter.

In node, your node code often is the entire webserver handling every request. But I normally put nginx out in front, and then have nginx pass only non-static requires to node -- let the webserver handle being good at being a webserver instead of building a new one.

Something like this https://geekflare.com/nginx-static-files-node-js/ is simple, and basically if the file exists, its served. Otherwise it forwards the request on -- presumably to the port your node app is running on. (I think the 2nd example here https://nuxtjs.org/integrations/deployments/nginx/ is nuxt specific, and handles the cache vs generation, which is more what you might need -- but I'm not a nuxt user.)

Seems off that you had to put them in your components folder as I believe the ‘complex store’ on this page fits your use case.

https://nuxtjs.org/docs/directory-structure/store#example-folder-structure

Non-static sites is tricky, because the dynamic behavior has to be done somewhere. You can build an external service of course, but that won't be on IPFS. I know a lot of people might have a lambda function on AWS for some specific purpose, and everything else can be static on IPFS.

One stopgap I've found is using a robust SPA framework in static mode (currently using Vue/Nuxt.js). You can do quite a bit with client-side processing, and to the user is can feel pretty dynamic.

But of course, once any kind of information that you don't want to expose to the user is involved, this is no longer sufficient.

This is a really good point and its consideration can't be understated. I think in general, the answer is, "you'll know when you need it". Unfortunately, that moment might come too late to do anything about it, i.e. the app is already mostly built out.

One cool recent trend in front-end JS development is blurring the distinction between "pages" and "an SPA". See Next.js (React) and Nuxt.js (Vue) for examples of such projects. You get the advantages of boring old relatively-static pages when desired, with the ability to supercharge individual components using the full power of the front-end framework.

For the first example you can use Dynamic Nested Routes, you can nest parameters in the /pages directory structure.

For the second one this.$route.query should do the trick. e.g. this.$route.query.d

There are docs for all of those things and the search is really good, what further information were you looking for?

https://nuxtjs.org/docs/2.x/internals-glossary/context#isdev

https://nuxtjs.org/docs/2.x/directory-structure/nuxt-config#runtimeconfig

This comment DID get me thinking u/Njkwales and my nuxt config was incorrect. I had

target: 'static',ssr: false,

Which doesn't work. You cannot have static and ssr false and generate fully static site. https://nuxtjs.org/blog/going-full-static/#new-config-option-target (which, tbh, doesn't make sense to me but ¯\_(ツ)_/¯

Note - this is a wild guess...

However, since you are trying to run this on an ec2 instance, change your host to 0.0.0.0. This allow nuxt to resolve requests to the ec2 (or any other server) instance.

https://nuxtjs.org/faq/host-port/

Google or other crawlers will most of the time have a hard time crawling a Single Page Application (SPA) that is built using vue, due to the fact the most of each page's content is produced asynchronously via ajax calls.

​

I would advice you to take a look at Nuxt.js, a vue-based framework that allows you to easily build server-side rendered (SSR) vue applications, which allows you to let the server create the content and then serve it to the client.

More @ https://nuxtjs.org/guide#static-generated-pre-rendering-

First, congrats on graduating.

Second, I think you may want to take a look at https://nuxtjs.org/ - it supports SPA and SSR modes. There are community templates, with many using axios for requests. You can actually integrate it with Express so you can achieve what you mentioned (web app where new users can log in, and view content that other users have posted). The nuxt-express template separates the client and server/api into folders so it's easy to follow. You can then host the app itself on a VPS or a service like Heroku :)

I recently used Nuxt and I don't think I'd go back to regular Vue. Check it out it's amazing. https://nuxtjs.org/

I used it to do a quick turnaround for a job interview assessment. It's also highly scalable.

I agree with Vue, I love how things are all properly organised, and VueX is great once you understand it (they have a great video on their site).

To link that into OP's experience, NuxtJS is kind of like Vue's equivalent of NextJS. There are various little gotchas early on (use webpack 4 on node v14) but it's nice to work with and you can really make things quickly when you build a little library of components and get used to it.

My fellow bucketeers! I'm very happy to announce that the new and improved spacebuckets.com is now live. I've been working really hard for a few months to migrate from Wordpress to a custom made Nuxt.js app, started from scratch. This means that the website now has a solid codebase that will be much easier to update. And also (hopefully) the performance and speed has been improved considerably.

Now that this first migration is done I can focus on adding better features and many more posts, since the process is much simpler. So expect the Gallery to grow exponentially! User submitted buckets will come back soon.

All feedback is super welcome! This is the first version, so some strange things may appear, like broken pages or repeated images. The bucketdrome will be available in a bit.

Cheers from the southern hemisphere

It's hard to summarize Nuxtjs features in one paragraph. But its main feature is server-side rendering (SSR) which renders on the server. That solves the SEO issues with modern Javascript client side apps.

So our use case may be similar to yours, but it may not.

The company I work for has around 20 eCommerce shops, they currently run through a hosted system similar to (but not) Shopify, this company is starting to charge us upwards to £500 a month per shop for the use of the system.

So we are now working on building our own replacement to this system with a fork of Saleor - a Django eCommerce system similar to Magento. Saleor offers a great GraphQL API that allows us to query the system and get specific bits of information - for example: the colour's a product can be bought in, or the filterable options from a product category.

We have a frontend framework for this built in Vue (well... Nuxt because we need server side rendering, but thats another story) which means its reasonably easy to build those fancy variant selectors, or do dynamic filtering of lists of products or even write fancy contact forms that validate a million different variables before they hit the server.

As an added advantage using the GQL API (should) mean that we can have multiple Django installs - one for each shop - that only vary by the data in the database.

Thats the theory anyway.

This is how pure SPAs work. But it is also worth mentioning hybrid applications.

In hybrid applications every page is prerendered to a HTML file + some bundled code. When the browser requests any page it gets that HTML and can imminently display it. Then the client side JS takes over and the page turns into an SPA where future requests act like the above comment, except refreshes load the specific prerendered page again.

Nuxt and Gastby fore example can both work in this method and it has the advantage over pure SPAs in that you don't need to wait for the javascript to render the first page - it is already rendered in HTML/CSS which helps to decrease the time until the user sees the content.

Ahh. I appreciate your reply. I haven't used Nuxt and haven't thought of it as a candidate for static site generation. I was able to read more about it's "pre-rendering" option here:

https://nuxtjs.org/guide#static-generated-pre-rendering-

Does auth-module support server side httpOnly cookies? Using tokens and client cookies is insecure and should be avoided:

https://www.rdegges.com/2018/please-stop-using-local-storage/

This looks like a better approach, use express-session to keep sessions server side only and carefully pass relevant user info through nuxtServerInit or fetch. If you are using a third party API that requires an auth token (e.g. backend Django/Rails/Laravel app) just store that in the server session and proxy API calls through that node script.

You might want to checkout nuxt (vue based), next (react based) or after (also react). All of these offer server side rendering using vue or react to prerender pages (great for SEO) to give you an inital static payload but then turn into an SPA afterwards.

You should look in to nuxt https://nuxtjs.org

There's an axios module, it uses vuex and ssr. There are also a lot of great examples on doing some of the things you're asking.

Also, Vue has an official style guide https://vuejs.org/v2/style-guide/

Laracasts also has videos on Vue, it's worth the membership

Which part "isn't true at all"?

The relatively new (the initial commit was in October 2016) or the 2nd part: https://nuxtjs.org/guide - see Introduction

I could've used "similar (idea)" instead of "equivalent" in retrospect.

When you have a lot of pages, the file system routing makes it very intuitive to figure out what page is being served without having to reference a route file. You can go the manual router option, as has been suggested, or you can extend your routes to give you this exception: https://nuxtjs.org/docs/features/file-system-routing/#extendroutes

You can't visit them directly as the routes haven't been generated - instead they are being created on the fly. If you want to pre-generate the pages, then the routes need to be linked to where the crawler can visit, or they need to be passed to the generate option in your nuxt config. See https://nuxtjs.org/docs/configuration-glossary/configuration-generate/#routes

From the information that you have given, again I would use query parameters. user?id=ABC.

When you do nuxt generate, then you will see the routes in the console ( or in the /dist folder ). This will show you if the pages have been statically generated.

The privateRuntimeConfig and publicRuntimeConfig properties are the new way to do what you would have used the env property for. Public for your baseUrl and private for api access tokens and other stuff you don't want exposed to the end user.

Here's a tutorial about how to migrate from env to the new runtime configs.

It just seems to not be working as it should (or more likely I'm doing something wrong)

For everything there is a library, this is sacred knowledge. Npm is the today front-end bible. (And backend if you use nodejs and js is ur thing)

Host Wordpress on a cheap vps if you want complete control and freedom.

For your own website Creation you could look into static site generators like nuxt or Hugo and host on github pages.

mapState / mapGetters is just a vuex way of observing some reactive data in your store. Whether you want to use that or not is up to you. In any event, you probably want your vuex data as computed properties, not as component data.

The error you are getting looks like it is because your component is trying to access data on an object before it exists, throwing an error before your nuxt lifecycles have a chance to be completed.

Lodash is a utility library and get is a method in that library. It lets you safely access an object even if it doesnt exist, because it will return either false or a predefined default instead of a runtime error. https://lodash.com/docs/#get Optional chaining is similar concept and a new feature to js: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

So the first thing I’d recommend you try is to be able to have your component initialize and mount without an error. Taking nested state out of data and moving to a computed property should help along with setting a default value some way. In your store you could set infos.reseaux.leins to an wmpty array. In your data object in your component leins gives an error because infos.reseaux doesnt exist yet.

Its hard to be certain this is your issue without a codepen or runnable code to test with, but thats what it looks like from your error.

Edit: take a look at nuxt lifecycles: https://nuxtjs.org/docs/concepts/nuxt-lifecycle/

I think your error is happening on created hook, before fetch. So think you need to fix that.

Edit 2: in your template, on the element wrapping your v-for, the one with class nav__reseaux, try adding a v-if=“liens.length”

You could push a .env file to the container. .env vars can be used at runtime if a corresponding key already exists in the runtime config object in nuxt.config.js.

https://nuxtjs.org/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config#expandinterpolation-support

Hey, yeah everything I said was about JS in general, Nuxt is just JS in the end.

I took a look at the links and Nuxt in general. You can define fetch and asyncData functions on your components. At least asyncData takes an argument (I am not sure about fetch, maybe it did in the past). I found this in the documentation:

https://nuxtjs.org/docs/2.x/directory-structure/pages#asyncdata

You can write the function like this

asyncData(context) {
const store = context.store;
const params = context.params;
...
}

or

asyncData({store, params}) { ... }

It does the same thing.

Nuxt will call these functions in the background for you and when it does, it will pass in the argument without you having to worry about it. In some cases programmers don't need the argument, then they don't have to declare it when writing the function.

I cannot explain it any better, I'd suggest just to write some code on your own and play around with the concept of destructing arguments. The best way to learn is to try it out!

Nuxt uses and supports alias mapping, to make directory accessible during webpack build (ie replaced) without typing entire paths

But your plug-in might not be processed, and hence not have the “magic sauce” applied.

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-alias/

Thank you! It should work on mobiles without problem, although for now I have only tested on Brave and Chrome, otherwise this information would help me to try to fix it:

• Web browser you use.
• Android or iOS?
• A screenshot of the error that appears when you click on the button with the red dot and the IPFS logo. (Screenshot of a "healthy node").

DreamLink is made with NuxtJS (Vue) and it is possible to see the source code here.

Transitions exists only for routes/between pages, not for components like the navbar. What you could do is write some css animations to make it look how you want.

This doesn't seem to be very straightforward. I am thinking about this for the first time, so this might not be helpful at all...

The first approach that comes to mind is to place a nuxt-child within the modal. So that you toggle the modal open first and the nuxt-child route gets displayed and the route changes.

That alone probably wouldn't cut it. You would need to either make the child route a dynamic route and/or use a dynamic component to load in the contents of the the login component. Maybe both?

Something like a "unknown dynamic nested route" and depending on what else you would want to display within a modal you could pair it with a page that reads the param and loads a dynamic component that loads based on matching the name.

Ok, I think I've found the solution and it was in the Vue Devtools source code.

I found this line const nuxtDetected = Boolean(window.__NUXT__ || window.$nuxt) in this file inside the Vue Devtools repo. But it uses the window object so it's not ideal.

However, according to Nuxt Docs this.$nuxt and window.$nuxt are the same thing. The difference is that this.$nuxt is accessible in Vue components and window.$nuxt only on the client side.

This kinda indicates that if(this.$nuxt) should do perfectly fine in my case.

From the Docs:

>If the action nuxtServerInit is defined in the store and the mode is universal, Nuxt.js will call it with the context (only from the server-side). It's useful when we have some data on the server we want to give directly to the client-side.
For example, let's say we have sessions on the server-side and we can access the connected user through req.session.user. To give the authenticated user to our store, we update our store/index.js to the following:
>
>actions: {
nuxtServerInit ({ commit }, { req }) {
if (req.session.user) {
commit('user', req.session.user)
}
}
}
>
>The context is given to nuxtServerInit as the 2nd argument in the asyncData method.
If nuxt generate is ran, nuxtServerInit will be executed for every dynamic route generated.

Source: https://nuxtjs.org/docs/2.x/directory-structure/store#the-nuxtserverinit-action

Hope it helps.

Not familiar with bull-board but you might want to look into dynamic pages using slugs:

https://nuxtjs.org/docs/2.x/directory-structure/pages#dynamic-pages

you mean extend the router as described here https://nuxtjs.org/docs/2.x/features/file-system-routing#extending-the-router

The “Create a Blog with Nuxt Content” tutorial provides guidance here. The difference is you will be passing the content as props to your card component instead.

https://nuxtjs.org/blog/creating-blog-with-nuxt-content#list-all-the-blog-posts

‘document is not defined ’ is probably caused by Nuxt running the code in Node as a part of SSR. Node being server side has neither document nor window in the global scope. If the library references these you need to include it only in the client You can read about it in the docs

Supposedly Nuxt is supposed to be smart enough to crawl relative URLs but it's a new feature so I don't know how well it works. What you're looking for is the routes section of generate, it allows you to basically tell nuxt what urls to generate. You should be able to get the full list from the content module, I'm not overly familiar with it though so I'm not sure how.

Thanks so much for all your help, by the way. I really appreciate it.

And no, I don't have a generate: { routes: ...} section because nuxt generate is supposed to have a crawler that crawls the pages for links to find out which URLs it needs to generate as of v2.13.0 or 2.14.0 - see Nuxt blog post.

In my terminal, I do see that the nuxt crawler is working and it is trying to generate static pages for all the _nested routes 3+ levels deep. However, it throws that error for every single one of those URLs 3+ levels deep and successfully generates the ones 2 or less.

Like BehindTheMath said, anything you store client-side can't be technically secure. In your situation I would look into nuxtjs, a more beefy vuejs framework that comes with some neat features like server-side rendering. See: https://nuxtjs.org/api/

Before a page loads, an `asyncData` function is called (this gets executed serverside, any functionality here is not on client's side) where you can have access to the server's environment variables and you can make graphQL calls securely with an api key or secret and pass response data to the client-side to be rendered in a table or whereever to be used.

Hope this helps

A nuxt.js application can have a node server bundled into it - express, hapi, etc. You can include the "config" module into your Node API (express in this case) and have the Nuxt app make calls to the Express API via a standard client-sided XHR or Nuxt.js's "asyncData" method (this is essentially a prefetch method defined on the page component that is loaded up on page load). You'd get to use Vue + all of it's reusable component functionality, all of webpack's build tools (polyfills, minification, etc), and consolidate it all into a single project and process if you took the Nuxt route. You'd just need to proxy your calls to the Express API to hide your API key(s).

Read up on "asyncData" - https://nuxtjs.org/guide/async-data/

If your content is asynchronous such as pulling from an api. It is difficult for search engine crawlers to see it because they don't know when your async calls are done. So on sites that need to perform well in search engines; such as a news site or an ecommerce store, it is common to hydrate the page with data on the server before sending it. Its usually done with a node server.

Basically your components execute on the server get sent as a finished page then the SPA takes over on the front end.

Its somewhat complicated but there are projects out there to help such as Nuxt.js. Also if your content doesn't change very often you can try a solution called pre-rendering which basically builds static versions of your dynamic content. It is a lot less complicated to integrate into a project.

I believe nuxt generate already does what you're asking. The generated page is used initially, but subsequent navigations happen SPA style.

Edit - Here are some resources:

• <code>nuxt generate</code> Documentation
• Vue Land Discord mod comment about <code>nuxt generate</code>

Following up on this, Nuxt website has a great example for Using nginx as a reverse proxy

The only thing I had to change was to remove expires $expires; as my version of nginx didn't support that directive.

• Static site generation
• file-based route structure (Single-file components in a "route1" folder become child routes of "route1" in the final output, automatically. The children can be templated in route1.vue with the nuxt-child component)
• easy, plug-and-play implementation of either npm-pulled modules (such as markdownit or axios) or custom-written modules
• same for plugins, that is, app-enhancement scripts that run in certain, user-specified situations

I could go on but the Nuxt docs have all the info you need. In short, Nuxt is the Vue equivalent of React's Next.js.

Hey, Dave here, Pathify author. I haven't worked with Nuxt yet, so I can't say for sure. From a brief look at the docs I'd expect the classic mode to work as-is, not sure if modules mode would need work. If you want me to check this out (and provide some help!) do file an issue :)

In my experience, nuxt.js with something like vue-bootstrap was the way to go for spooling up an admin.

All these templates are usually too specific to what they boilerplate.

Might have something to do with the action being async and the fetch method is not waiting on it to respond before rendering the page for the first time.

https://vuex.vuejs.org/en/actions.html ( have a look at the async part ) https://nuxtjs.org/api/pages-fetch ( have a look at the async part also )

Didn't have the time to test the code here, so it's a shot in the dark.

in plugins directory add file buefy.js and paste:

import Vue from 'vue' import Buefy from 'buefy' import 'buefy/lib/buefy.css'

Vue.use(Buefy)

and then, in nuxt.config.js add:

plugins: ['~plugins/buefy'],

see: https://nuxtjs.org/guide/plugins/#vue-plugins

Copying from the post I posted above: > Basically, it will be a company website that has dynamic content that admins can add/remove/edit/whatever. All visitors will see everything but admin interfaces, which makes it even easier, as I do not need to implement complete auth...

The thing is, I can rapidly write something in say nuxt.js rather than learning D8's templating and so.

Also, I am kinda stuck with D8 since my company wants people to learn D8 in case that it is explicitly stated as requirement in some tender (yes, it does happen sometimes)

> For client side rendering there is a problem with refresh as by default on Netlify the site redirects to "404 not found". For any pages that are not generated they will fallback to SPA mode and then if you refresh or share that link you will get Netlify's 404 page. This is because the pages that are not generated don't actually exist as they are actually a single page application so if you refresh this page you will get a 404 because the url for that page doesn't actually exist. By redirecting to the 404.html Nuxt will reload your page correctly in SPA fallback.

https://nuxtjs.org/deployments/netlify/

Thank you, appreciated. So in the context of data fetching, that presumably means that cached components, when requested again e.g. after a route change, will have their fetch hook data loaded from cache rather than live?

1. It depends how you are fetching the data. I can recommend getting really familiar with the Nuxt Lifecycle https://nuxtjs.org/docs/concepts/nuxt-lifecycle/

2. Nuxt alone isn’t solely responsible for caching. Your server should be responsible for caching of the SSR pages across all sessions. I use Layer0 for larger projects because it has two things that differentiate it. The first is a routes config that lets you set cache ttl and cache keys right in your codebase: https://docs.layer0.co/guides/caching

The other is their cache has a rest api where you can programmatically purge the cache of specific keys - which is what you want if you are receiving webhooks on underlying content changes: https://docs.layer0.co/guides/rest_api#section_clear_cache

Hope that helps, good luck!

Two ways I could think of:

• Use a dynamic import that switches based on the process client/server flag to import the actual data or use a stub.
• Shove the entire thing onto privateRuntimeConfig so that it is only exposed on the server and you can access it with $config during SSR. This will probably bloat your process's memory usage considerably.

If it's a huge data set, I would seriously consider dumping it into some kind of minimal database that you can query against during SSR, that way the data isn't bundled with the app and you dont have to load the entire dataset just to find a single item.

Deploying your site to Netlify / Render / Vercel would be easiest. They automatically deploy the latest version from the Git repo. They also have build hooks, which you can deploy from a backend ( if using ).

https://nuxtjs.org/deployments/netlify/

>It's not possible to use `redirect` or `error` in client-side Nuxt plugin due to hydration errors (client content would be different from what it'd expect from the server).A valid workaround would be using `window.onNuxtReady(() => { window.$nuxt.$router.push('/your-route') })`

https://nuxtjs.org/docs/internals-glossary/context/#redirect

Thanks, this is working great. Will this still work after SSG rather than just via a node server, or will there be any client-side-only complications with this? There's a note in the docs for redirect (which my middleware script is using) that it doesn't work on client side, or something?

Nuxt3 is in beta, so if you are able to reproduce an issue, opening an issue on the project would be helpful.

In nuxt, your assets folder is processed by webpack, its different than the public/static folder which gives you the predictable urls / filenames. You can augment your webpack config in nuxt.config https://nuxtjs.org/docs/features/configuration/#extend-webpack-config

This is from the Official Nuxt Site

>Assets directory
>
>The assets directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts.
>
>...
>
>When working with dynamic images you will need to use require
>
><img :src="require(`~/assets/img/${image}.jpg`)" />

I can't use the CDN as with a big government entity, there more red tape and security that needs to be vetted.

Is using the static folder is the right thing or a workaround to something that should work.

If you're using Vue, switch to NuxtJS. It's a Server Side Rendering (SSR) framework for Vue.

The issue with the bots is that they [sometimes] don't execute JavaScript when they crawl your pages. Google CAN do this, but it's hit or miss (It definitely executes React and Angular, but not sure about other frameworks). SSR prerenders your HTML for them to crawl, and generally speeds up page loads.

In addition, you'll want to cache your pages and serve from a CDN. Cloudflare is probably the simplest / best choice in this regard. Note though, that if you're generating dynamic content, caching can be problematic sometimes - you'll have to research your specific use cases. For static content though, always cache.

Those two changes will dramatically speed up your page, and make the bots happy. Beyond that, you'll be looking at server / disk / database performance.

I think this is what you are looking for. https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/

Something being corrupted in the route generation, from assumed dynamic routes vs static files?

https://nuxtjs.org/docs/features/file-system-routing#dynamic-routes

Hard to go beyond general guess with out repo or snippets. Amazon and s3 has option for folder as index, up that doesn’t sound like relevant case here.

When did it it break? Added some plugins, made new layout, …? Is it 2 or 3 beta? Generated basic Nuxt starter or copied from some other sample?

I did this:

https://nuxtjs.org/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config/

It's not possible I guess, I have to generate these routes and serve them as static. so I only need some API endpoints for searching, etc.

Hey sorry to maybe sound rude but your posts look like you didnt take a look at the docs. Nuxt - Going full static

Lets say you have a new blogpost in the future, what do you do? In an nodejs/ssr environment its obvious and no problem. But a static site only displays what was there during generation, so a solution will be something like what i am trying to achieve:

Using Wordpress as my headless CMS i can observe whenever a post or a page got saved and execute a function or make a request to where my nuxt-project is and finally re-generate the site or you setup a cron-job which will run the generate task and then upload the new files every 6,12, or 24 hours - depends on your situation and how frequently the content on your site gets updated/published

i wish you luck with your app! One more thing; for static content publishing there is a project called Nuxt Content - maybe this suits your needs better!

Restore your node_modules and run npm run build.

Then run node ./node_modules/nuxt/bin/nuxt.js to run app on local port. Reverse proxy that using your tool of choice (nginx, caddy, etc)

https://nuxtjs.org/deployments/pm2/

>https://nuxtjs.org/integrations/deployments/github-pages#deploying-to-github-pages-for-repository

New link, after the docs were updated:

https://nuxtjs.org/deployments/github-pages#deploying-to-github-pages-for-repository

You need to take your entire root project directory to the server [this is the directory with your package.json]. Run yarn build to ensure you have a production build.

Run the application by invoking ./node_modules/nuxt/bin/nuxt.js This will expose the Nuxt app at port 3000. Reverse proxy this localhost:3000 location.

You can make the process of restarting it easier by using PM2. Place a file called ecosystem.config.js in your root project application and use it via PM2. [https://nuxtjs.org/integrations/deployments/pm2/] (See configuration docs here).

The issue might be happening because on GitHub pages the URL is under the project name directory if you don't have a custom domain. Look at the docs which I've linked below for setting up Nuxt with GiHub pages which would explain it better than me. The fix would be to add the repository name for the router:base inside nuxt.config.js https://nuxtjs.org/integrations/deployments/github-pages#deploying-to-github-pages-for-repository

Putting images in the static folder just means they won't go through webpack processing. Image files go through file-loader and url-loader. Using the static directory means you don't get the benefits of version hashing for better caching and the image being converted to base64. The docs explain this if you want to read more: https://nuxtjs.org/docs/directory-structure/assets/

I think you are misunderstanding something. For static files, you have to point to the nuxt static directory.

>The static directory is directly mapped to the server root () and contains files that likely won't be changed. All included files will be automatically served by Nuxt and are accessible through your project root URL.

You can put you image into your static folder as follows: ~/static/your-image.jpg. In your html: <img src="/your-image.jpg" />.

>/static/favicon.ico will be available at http://localhost:3000/favicon.ico

You'll want to use `asyncData` or `fetch` within your page component.

Docs: https://nuxtjs.org/docs/2.x/features/data-fetching
ex)...

async asyncData() {
const data = await endpointService.getData();
return {
data,
};
},
created() {

...

I don’t use generate a lot but you can follow a pattern like this: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate#function-which-returns-a-promise

And in your dynamicRoutes function, depending on where it is invoked, you can pass in nuxt context or app and then access the apollo client from there, similar to this: https://www.npmjs.com/package/@nuxtjs/apollo#asyncdatafetch-method-of-page-component

It looks like your error is because it can’t find ApolloClient. If that is auto-imported like you have it ( very well could be ) at least I’ve never used it like that.

If you can spin up a codepen or similar repro I’d be happy to take a closer look. Good luck!

The Fiber docs have information on setting up JSON API endpoints. For the Vue side, I'd probably recommend using Nuxt. Their guides are pretty good for getting started: https://nuxtjs.org/docs/2.x/get-started/installation

Keep in mind, you will effectively have two separate services (usually on different ports). When you go to deploy, you'll likely want to use a reverse proxy (Nginx is pretty straightforward for that) and have a subdomain for your API (like api.domain.com). The reverse proxy will send requests on normal web ports to the corresponding web server depending on what domain it comes in on (api subdomain will go to the Fiber service on its port and www will go to your Nuxt service on a different port)

Fwiw, my company does all of our web deployments with docker containers, and we use Traefik (which is written in Go) to handle reverse proxying services without exposing ports on localhost. There's a lot of ways to do what you're doing, so I'd probably start off with just getting Fiber and Nuxt up and running on different ports, then learn how to reverse proxy requests with Nginx to get started.

No. You have to go an extra mile in order to run the build in development mode, as issuing a `nuxt start` command after a `nuxt build` forces the node environment to production. You can see that here. Its also harder to confuse them, as the dev build consumes 2GB memory and the production one is about 50mb.

Yes, I am using it in my app.
Doc: https://nuxtjs.org/examples/routing-dynamic-pages

You can extract the path like:

asyncData({ params }) {

const path = params.pathMatch

return { path }

},

creating a nuxt plugin did not work for me... yet.

I think I do want to explore adding Moralis as "middleware" and will explore that.

For now, I was able to install Moralis through

npm install -g moralis

then using Moralis ... in a vue file ...

==============================================

<template>

...

<v-btn

color="primary"

u/click="displayERC20"

&gt;

View Your ERC-20 digital assets

</v-btn>

...

</template>

...

<script>

import Moralis from 'moralis';

Moralis.initialize("<YOUR APPLICATION ID>");

Moralis.serverURL = '<YOUR SERVER INSTANCE>'

export default {

data() {

return {

eth\_address: ''

}

},

methods: {

displayERC20() {

Moralis.Web3.authenticate().then(function (user) {

console.log(user.get('ethAddress'))

})

}

}

}

</script>

==============================================

This is not optimal, but at least I can get some demonstration pages LIVE and I think middleware is the way to go ultimately so that I can maintain global context for authentication and many other things.

https://nuxtjs.org/docs/2.x/directory-structure/middleware

Add 0.0.0.0 in the server.host part in nuxt.config.js, just like you indicated and it worked. But now I'm trying to use nginx to add a domain, but I'm trying to configure it by following the nuxt documentation https://nuxtjs.org/docs/2.x/deployment/nginx-proxy, and it doesn't work and I don't know how to do it. So I wanted to know how you set it up to work. How frustrating not knowing how to do it 😔!

This is my NGINX configuration ``` map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; }

server { listen 80; server_name grontix.com www.grontix.com; gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000;

location / { expires $expires;

proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 1m; proxy_connect_timeout 1m; proxy_pass http://localhost:3000; } } ```

Disclaimer, we're mostly backend folks so could be wrong about this!

I believe you can swap the mode you want: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-mode/

And we're using the default (unless I'm mistaken!)

This style could have downsides like bad SEO in some cases, and that's also not really our specialty. I believe Google can crawl SPAs without the server rendering things for you, but there are probably many downsides besides SEO. Normal HTML crawlers will have trouble for sure, but that could be a benefit?

It sounds like unnecessary cost for you on SSR, IMO.

In terms of performance, an imprint page/navigation component wouldn't really hurt you all that much(unless you go wild!)

Regardless, if you want to run static generation, you can use the <client-only> to force render certain components on the client side:

https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component

Honestly I think you're stuck because you don't want static content at all. You want client-side rendering.

https://nuxtjs.org/docs/2.x/features/rendering-modes/#client-side-rendering-only

Check out Vercel to deploy your projects directly from GitHub.

Well, as you can see in the lifecycle hooks available, the user shouldn't be able to see it because it's still compiling on the server during asyncData() before sending back to client.

I use Nuxt for work, I've run into the same problem before, and I know this method works, so I suggest giving it a go again and see what you come up with.

Are you using server-side rendering? If so, you should look into the nuxtServerInit action in the root store.

https://nuxtjs.org/docs/2.x/directory-structure/store#the-nuxtserverinit-action

You could also try using a middleware to do this as well

Edit: I've had issues like this before. It was due to SSR and the data being set server-side but not making it to the client

Ok thank you for the info. I've found more relevant info here. They said that the development experience isn't that great in static mode. How did you find it? Are there any reasons why you might choose to take the SSR route instead?

You can turn on caching and parallel builds for the dev builds - build.cache, build.hardSource, build.parallel. Just beware that these are experimental.

According to this, it doesn't look like it: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env#servermiddleware

You may need to just set up the URLs in your .env file in the root.

You might find some additional help in the Nuxt Discord: https://discord.gg/jdy9Ca8r

Thanks, i ended up using nginx in the end. so am reverse proxing all request to port 80 to localhost:3000.

everything works fine other than the requests to the servermiddlware urls. Those urls still point to localhost. Could it be this? https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env

You can do server-side rendering with VueJS, and so I assume the same for ReactJS as well. This means when Google hits your backend it gets the fully rendered page, ie. better SEO. So you can get the best of both worlds but might cause some initial headaches trying to comprehend what is getting rendered where.

Check out https://nuxtjs.org/ which is a server-side rendering framework built on VueJS

This is likely related to the full-static mode, where the result of `asyncData` is saved in a JSONP file. This means that asyncData itself won't be called again on client-side (and the saved result is reused).

See https://nuxtjs.org/blog/going-full-static#smarter-nuxt-generate

What are you trying to achieve?

There is a page on Nuxt's doc about azure deployment.
In any case, it is a Node app, you can just go through Azure's documentation

Have you checked out Nuxtjs? Under the hood nuxt handles codesplitting and this complexity without having to spend days implementing yourself.

Nuxt.js gives you automatic code splitting for your routes, no configuration is needed

https://nuxtjs.org/docs/2.x/features/file-system-routing

Depending on how you hook up the api, might be suitable to run nuxt in Single Page App (spa) mode, having Axios to fetch on client directly front the api, in which case could skip Heroku and compile. But that means exposing the api

https://nuxtjs.org/examples/modules-axios/ And more with video on https://axios.nuxtjs.org/

> Note that Nuxt uses webpack's definePlugin to define the environmental variable. This means that the actual process or process.env from Node.js is neither available nor defined.

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env/

It might look like plain node, but it is a few layers of “magic” going on

You are not setting it in the second code example, if you want the same title on most of your pages you need to set the title in your nuxtconfig or use the titleTemplate like in this example

You need to add a hid property to each meta element, this helps vue-meta know that you want to override the meta element, see here . The I'd can be any string it just needs to be the same in both