What are /r/Nuxt's favorite Products & Services?

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/

Are you asking for Nuxt specifically or just anything? If you don't know what you want to build, these are good practice/portfolio projects that got me my first job: https://www.freecodecamp.org/learn/front-end-libraries/#front-end-libraries-projects

You don't need a nuxt-specific tutorial, just pick something you want to build and start the project using nuxt to create the project template, Nuxt is dope, it's like using Vue on easy-mode, I use it at my job and I love it

This is the most basic approach

&lt;template&gt;
  &lt;div class="columns"&gt;
    &lt;div v-for="n in 5" :key="n" @click="toggleImage(n)"&gt;
      &lt;img src="https://www.fillmurray.com/150/150"&gt;
      &lt;div v-if="isSelected(n)"&gt;Look at me&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;

export default {
  name: "App",
  data(){
    return {
      selectedImages: []
    }
  },
  methods: {
    toggleImage(n){
     if(this.isSelected(n)){
       const index = this.selectedImages.indexOf(n)
       this.selectedImages.splice(index, 1)
     } else {
       this.selectedImages.push(n)
     }
    },
    isSelected(n){
      return this.selectedImages.includes(n)
    }
  }
};
&lt;/script&gt;

Codesandbox example

The natural progression will be to extract image into a separate component and keep its toggled state internally

I think what you are looking for is the Nuxt env config item in your Nuxt config. Add what you want and access via ‘context.env.foo’

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

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

Have you tried this setup?

More info in this issue on the locomotive-scroll repo

I don't really understand how you envision the page in the modal part, but I made a playground for you to illustrate how you could get the dynamic breakpoint value.

Not sure how you are import Bootstrap 5 in your current project but it should be as easy as removing Bootstrap 5 and adding the CDN links for Bootstrap 3.

https://getbootstrap.com/docs/3.3/getting-started/

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)

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/

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.

If you want to stay working with Vue and share components, give Nativescript a shot - https://www.nativescript.org//vue/index.html

Otherwise, I’d look into Flutter. It’s pretty easy to pickup and supports Android and iOS.

Not really answering your question, but you could maybe take a look at strapi instead of Wordpress as a headless cms. The Wordpress rest api is a bit slow in my experience, especially when you have a large website. Strapi could be a solution, although it requires some more setup then Wordpress.

I use Plausible, but any script tag can be included in the app section of your nuxt.config.ts | js:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({ app: { head: { script: [{ defer: 'defer', // 'data-domain': 'mydomain.com' (Plausible-specific), src: 'https://plausible.io/js/plausible.js' }], }, } })

I've been looking into this and it seems Vercel, for example, infer pushes to the main branch as production updates, while pushes to any other branches are inferred as dev updates. (Docs). This is an issue for me as my Git setup as very simple - I just have the main branch, no others. Someone in another thread suggested having Vercel / Netlify etc look at releases, not branches, but from what I've read this isn't possible since, as I say, Vercel seems to care about branches not releases?

> 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?

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.

CRM or CMS? Based on your explanation, I feel like you mean CMS, in which case you should check out strapi

bonus link to strapi w/ nuxt stuff

nuxt ssr project with buefy here
nuxt color-mode module is giving me an sass error when used on an scss file
CodeSandbox link
can someone kindly help?

Unfortunately I can't tell you why it doesn't work, but here is a working example with the nuxt/svg library:
Codesandbox

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?

nuxtServerInit is called on the server, which has no knowledge of user being authenticated. If you plan on accessing restricted data on your backend (ex. loading protected data from Firestore, which requires you to be signed in) then you have to make use of Firebase cookies https://firebase.google.com/docs/auth/admin/manage-cookies Otherwise you would be okay with just using vuex store to keep track of your auth. I don't like this particular example, but it's the most popular one: https://github.com/davidroyer/nuxt-ssr-firebase-auth.v2

node-sass is a weird one where it needs to be compiled on the same OS even some times on the same computer, my suggestion would be to run the `npm run build` at the same place you are doing the `npm install`. You could look into gitlab ci "artefacts" for your build folder, or you could use a git branch where you push the build folder into, either way it's a hard one.

I finally got it working on my internal servers by sshing into the production server from the gitlab ci container and transfering over the artefact folder with rsync.

This is where I got the idea

If you want to deploy to a VPS (DigitalOcean, AWS, Linode, etc) then I'd suggest using cleavr.io which provisions servers, makes them ready for Node/Nuxt, and deploys your apps. Saves you the huge hassle of setting it all up yourself.

I was also looking before, and only found one so far:

https://creativemarket.com/themebiotic/2563956-Source-Universal-App-VueJs-Nuxt

I kinda just gave up and accepted the fact that Nuxt (or Vue) is not that popular so a theme marketplace is a long way to go. But I don't want to give up using Nuxt since I loved it a lot so I just build everything myself now.

I'm a fan of https://directus.io/, I just finished a Nuxt site that uses it. It should be able to do what you're describing. There's a JS SDK you can import in your Nuxt templates or store. You can host it yourself (it's open source) if you don't want to use their SaaS hosting.

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!

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.

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 ...

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

...

<v-btn

color="primary"

u/click="displayERC20"

>

View Your ERC-20 digital assets

</v-btn>

...

</template>

...

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

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

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

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

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/

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

Vuex is optional, and as far as I know is enabled only when having an index.js on store folder. https://nuxtjs.org/docs/2.x/directory-structure/store . I see they use vuex in nuxt core so full drop may not be possible.

Looks like you're running in SPA mode, which means any scraper that doesn't parse JS (which is pretty much everyone who is not Google) will not see your metadata correctly, because it gets added by JS after the page loads. If you look at the page source (not in dev tools, load the actual source by right click -> view page source) you can see that you don't have any markup rendered outside of the basic app shell, and the meta tags and title are the ones that are set in the nuxt.config.js because that's what the default is.

There are several ways to fix this, you can run a node server that generates pages for you on the fly or you can pre-render using nuxt's generate command when deploying. Depends on your needs what will work best, but both will solve this issue: https://nuxtjs.org/docs/2.x/get-started/commands#server-deployment

I noticed the same behavior when using the cookie auth scheme (using sanctum). But it works with <client-only> and I don‘t rely on many public (non-auth required) pages where I display auth-/user-related things, the issue went way down on my todo-/fix list.

Some answers on how to fix this, mention that you can check for the cookie on the incoming request in the nuxtServerInit Store Action (you can access the req context in this one) to preload any auth related data.

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

Hope it helps, would be nice to know if this fixes your issue 😅

Yeah, use different repos and just create a component library using the method described here: https://nuxtjs.org/blog/improve-your-developer-experience-with-nuxt-components/#third-party-component-library

Then, handle the URL correctly in Netlify by updating CNAME records or whatever pointing to your seperate deploys.

Have you tried it in a template like in this example. You could also add it in a plugin file and assign it as a prototype on the $nuxt object if you need to use it in several components.

Service workers would cache per visitor client side. Unless its polling the server every 15 seconds or a websocket listening for an event it would never update even if there is a server side update every 15 seconds in background. The only time it would update would be when a visitor reloads the page or triggers an action to refresh the data.

Something like the nuxt $fetch method can be used to trigger the update. nuxtjs article about fetch

The stackoverflow post before covered how to create a server side cache that will only update after X amount of time and so if lots of clients are calling the server every 15 seconds it won't call the API until the server side cache has expired and that time can be set to anything. But ultimately you can do the same thing with a proxy for the API and simply have the clients call that every 15 seconds or use a websocket so the clients are listening for an event vs asking for updates.

serverMiddleware acts like an endpoint on the server. I don't see how you can access the store.

Return JSON in the response and handle it on the client.

Edit: or use asyncData

Edit 2: or maybe nuxtServerInit

Then I would recommend reading these:

https://nuxtjs.org/blog/going-full-static/

And the follow-up:

https://nuxtjs.org/blog/nuxt-static-improvements

Where the payload method won’t be used at all

Actually hadn’t heard of it before and decided to integrate if after reading your post (https://nextnovelproject.com/blog). Docs are pretty good and the guide to setting up a blog was straightforward (https://nuxtjs.org/blog/creating-blog-with-nuxt-content/).

Using it with SSR since the rest of the site needs to run that way. But it’s an easy way to have a small blog area.

I think I may have found the issue - I'll work on it later, but I just read "When generating your web application with nuxt generate, the context given to asyncData and fetch will not have req and res." - Nuxt Docs

My pages call asyncData and use the res response... I'll have to figure out the best way to get the data from my API for this page. Again this is my first development project and I could really use all the help I can get, so do you have any suggestions for alternatives? I only use the asyncData for these pages on the specific page (only used on this specific subcategory or item page) and I don't think I need to store it in the vuex store like I do other data (called in nuxtServerInit).

Also as follow up question, it takes about an hour to generate all my static pages on a relatively fast desktop (running both the Django REST API and Nuxt on it)... is that unreasonably long and do you know tips for speeding it up? For context, there are 500+ pages.

My plan is to generate the static pages locally and then host on AWS S3 and serve it from CloudFront / Route53. I have that all set up and working, just trying to get the build to work.

Thanks slybootz! :)

I haven't tested, but isn't it the case that when in Universal mode in nuxt.config.js + generate on the server you'll get static site with SPA fallback?

You may be able to exclude these dynamic routes from generate and then skip the build and deploy process when these pages are created in the CMS: https://nuxtjs.org/api/configuration-generate#exclude

I only took a quick glance at your issue but nuxtServerInit is utilized in your code? https://nuxtjs.org/guide/vuex-store/#the-nuxtserverinit-action

You want some vars set from first initial api call - this is usually the place to do that.

I think what you're after is the <client-only> component as you're loading content async.

If you are relying on any SEO benefits from this content, then you may have issues with bots reading this async content, I could be wrong on this though.

Read more on <client-only> at The <client-only> component

You can set up a custom app.html: https://nuxtjs.org/guide/views#app-template. Looks like nuxt injects the div itself too so you might need to get creative to hide it once nuxt loads. Maybe some clever css or something?

They wrote a blog post about this.

If you needed to get data for your Vuex store and don't need access to your component's this context you could use asyncData. If you need to get some data from an api and set it to a property in your component's data object you would use fetch().

There's a perfect example in the Nuxt documentation: https://nuxtjs.org/api/pages-middleware/

If it were one page I would do the check in the page component, but as you're going to have a few protected routes it'll be better as a named middleware script.

If the plugin exports an ES6 module, you may need to add a reference for it in the transpile setting under build options. See: https://nuxtjs.org/guide/plugins/#es6-plugins

For a quick to tutorial on it check out this screencast: https://youtu.be/j7l5e2ID0aw

As written in the docs

~ or @ --> srcDir

~~ or @@ --> rootDir

by default, srcDir is the same as rootDir

Personally I only use ~ but there are developers that prefer to use @ on a .vue file, and ~ on a .js file

I think this is what you're looking for: https://nuxtjs.org/api/configuration-generate/#routes

It seems generate->routes can be defined as an array or as a function if you want to dynamically predefine your routes

Nuxt checks for a JS file in the "store" directory, and only instantiates a Vuex store if it finds one.

https://nuxtjs.org/guide/vuex-store/

> Nuxt.js lets you decide between 2 store modes. You can choose the one you prefer: > > * Modules: every .js file inside the store directory is transformed as a namespaced module (index being the root module). > * Classic (deprecated): store/index.js returns a method to create a store instance.

You don't really need too, I've had apps consumed 800mb ++ in development. Once built and installed in production never go over 25mb. File size on the other hand is something you should look out for. It gives you a overview of your file sizes when you run npm run build. You can check what packages are taking too much space by setting the analyze property in your nuxt config https://nuxtjs.org/api/configuration-build/#analyze make sure to take it out once you are ready to deploy.

I'm going through something similar right now deploying to Netlify—just under 10,000 pages.

Using payload helps a good deal if you aren't using it already. It fetches everything in one huge call from your backend. Rather than have nuxt generate make calls to the API for each page, it just iterates down an array of objects (each of which contains everything your API would have returned piecemeal before).

Unfortunately, I'm still hitting Netlify's 15-minute limit on builds, so I'm still looking for optimizations. The next thing I'm going to try are these three experimental settings.

Let me know if you end up finding other solutions!

> I would ideally like to host the frontend on Netlify, but I have concerns about the changing of data when doing this. How does that work if the user will be modifying and creating data through API calls (this is for a personal finance app so lots of transactions, etc), does the site need to be re-rendered each time?

I just recognized your username! Thanks for posting Sarah. I'm currently using Netlify and it's been a great process.

If you don't mind me asking, does Netlify support SSR? The Nuxt.js docs suggest using the nuxt generate which I thought was not SSR - although I could be wrong. https://nuxtjs.org/faq/netlify-deployment/

I don't have hands-on experience with Google Cloud Buckets but I know that S3, Netlifly and Cloudflare Workers Sites all allow you to upload a 404.html which can include your router logic to load the correct page or show a 404 message if one isn't found, so I imagine it's the same. Just add the fallback: true and you should be good if you are using the generate command.

https://nuxtjs.org/api/configuration-generate/#fallback

are you setting a linkActiveClass in your nuxt config ? If you arent setting anything maybe nuxt's default is a linkExactActiveClass

See here

In that case would head work?

Im unsure if can use the head function in a layout template but if not, for the sake of code duplicate accross multiple pages you could just make two mixins which different head function for each theme then apply mixins to page components

I vaguely remember this but you can add buildDir:"public" or something like that to nuxtconfig.js to build the project and then just deploy the built folder like you normally would.

https://nuxtjs.org/api/configuration-builddir/

Thank you for your help! Curiously the upper case extension did work before adding the svg-module.

I had looked at the Nuxt project website and they use the static folder for their media. Do you know the rationale behind either choice?

There's the publicPath option that you can use.

I've been using it just fine on Heroku.

Relevant piece of config for Heroku:

build: { // Adds CDN support // Env is set by Heroku Edge add-on // https://devcenter.heroku.com/articles/edge publicPath: ${process.env.EDGE_URL || ''}/_nuxt/ },

your example won't work because nuxt calls nuxtServerInit from actions and in this case your first definition of nuxtServerInit is being overwritten by the second. try something like this:

async nuxtServerInit({ dispatch }) {
  dispatch('LOAD_WEBSITEDATA')
  return await dispatch('LOAD_SLIDER')
},

nuxtServerInit will dispatch those two actions asynchronously. also note: >Note: Asynchronous nuxtServerInit actions must return a Promise or leverage async/await to allow the nuxt server to wait on them. more here: https://nuxtjs.org/guide/vuex-store/#the-nuxtserverinit-action

It's a different configuration. This is the same as serverMiddleware. What this does is run Nuxt as the main entry point and Express routes on top of it. I've never used, but theoretically it should do what you want. I'd ask on the Nuxt Discord server!

What are /r/Nuxt's favorite Products & Services?
From 3.5 billion Reddit comments

The most popular Services mentioned in /r/Nuxt:

Nuxt.js

CodeSandbox

Netlify

Sanity.io

Strapi

Prismic

Vuetify

Bootstrap

Product Hunt

freeCodeCamp

GitLab

Ghost

StackBlitz

Quasar Framework

Firebase

The most popular reviews in /r/Nuxt:

What are /r/Nuxt's favorite Products & Services? From 3.5 billion Reddit comments