Nuxt.js: proposal: nuxt internal API route interface

Created on 19 Mar 2017  Â·  11Comments  Â·  Source: nuxt/nuxt.js

Main Benefits

  1. Take advantage of webpack HMR for API. Currently, when using nuxt.render middleware, the entire project restarts and takes significant amount of time to work on backend api work.
  2. Single api resource definition and use from both server and client.
  3. Removes need for

    • express

    • proxy route

    • reduces ssr latency by eliminating the http call

Using express routes as an example

api.get('/users', async function(req,res) {
  res.send( await Users.find() )
}

If we can make api a resource also available from the client and automatically bound to the route defined

Sample component

import api from '~api'
module.exports = {
 async data () {
  users: await api.get('/users')
 }
}

Api now will be universal and depending on the runtime environment will toggle between actually running the route from the server or hitting the api end point from the client.

I know this is real rough and high level - it may also conflict with what nuxt stands for. I'm not sure if we want to be agnostic in server api implementations. However, as nuxt currently stands, there is quite a bit of work a developer must go through before having a workable implementation with the server.

This feature request is available on Nuxt.js community (#c345)

Most helpful comment

Hi @uptownhr

This is an interesting question, to quote our documentation:

What is Nuxt.js ?

Nuxt.js is a framework for creating Universal Vue.js Applications.
Its main scope is UI rendering while abstracting away the client/server distribution.

Every nuxt.js project should focus on UI rendering and call external API, the server should not be mixed with nuxt.js.

But, there is a but, a lot of people does not want multiple servers and we understand this. That's why we created mutliple starters (express, adonuxt and more). The actual downside of them is when we work on the server-side, it takes a while for nuxt.js to build the application.

We cannot force the users to create micro-services to use nuxt.js. I believe your suggestion might be a good thing to enjoy working on the server as well.

What do you think of having something like nuxt-api which is a module of nuxt:

nuxt.config.js

module.exports = {
  modules: ['nuxt-api']
}

This module will extend the nuxt instance to listen on the api folder and add the features you talked about.

All 11 comments

Hi @uptownhr

This is an interesting question, to quote our documentation:

What is Nuxt.js ?

Nuxt.js is a framework for creating Universal Vue.js Applications.
Its main scope is UI rendering while abstracting away the client/server distribution.

Every nuxt.js project should focus on UI rendering and call external API, the server should not be mixed with nuxt.js.

But, there is a but, a lot of people does not want multiple servers and we understand this. That's why we created mutliple starters (express, adonuxt and more). The actual downside of them is when we work on the server-side, it takes a while for nuxt.js to build the application.

We cannot force the users to create micro-services to use nuxt.js. I believe your suggestion might be a good thing to enjoy working on the server as well.

What do you think of having something like nuxt-api which is a module of nuxt:

nuxt.config.js

module.exports = {
  modules: ['nuxt-api']
}

This module will extend the nuxt instance to listen on the api folder and add the features you talked about.

@Atinux That would be great extension for nuxt!

hi i was confused how to use proxyable

Can you explain a little More?

On Tue, May 30, 2017, 8:05 AM lemonpigpig notifications@github.com wrote:

hi i was confused how to use proxyable

—
You are receiving this because you were assigned.

Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/402#issuecomment-304907864, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AA-Utky6GL-YHPRspCHGEc95XW5BABfaks5r_DAjgaJpZM4Mhp8G
.

I believe someone could create this module with the modules now since it's possible with 1.0 :)

How do you get access to adding in middlewares to connect from a module?

On Sun, Aug 13, 2017, 12:57 PM Sébastien Chopin notifications@github.com
wrote:

Closed #402 https://github.com/nuxt/nuxt.js/issues/402.

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/402#event-1203989441, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AA-UtgL83FI06B3v_9JliaTkOmYUDBC0ks5sX1UegaJpZM4Mhp8G
.

I've been searching through the documentation of nuxt.js for exactly this. I simply want to fetch my data from an ElasticSearch instance and present it in the (nuxt) app. It seems a bit superfluous to create a separate process/node app that exposes an API for connecting to the DB and fetching the results, and I was wondering if I could create some API endpoints for this in Nuxt internally that I can call with axios.

I can't really find any leads on how to create a nuxt-api module as referenced above, or what it should look like to provide API endpoints. Can anyone point me in the right direction? How would you realize

This module will extend the nuxt instance to listen on the api folder and add the features you talked about.

as @Atinux suggests, particularly the 'extending of the nuxt instance' part?

Another option I have considered is to just create an express app and use nuxt as the middleware (in the lines of the Nuxt express template, but I don't know if this would be a better option than the modules solution.

Well, a bit more searching delivered: https://nuxtjs.org/api/configuration-servermiddleware/ seems to be what I'm looking for.

I have done another quick hack, that is added this little piece of code in `server/index.js'

  app.get('/api', (req, res) => {
    res.json({ message: "Hello World!" })
  })

I think this way we can write middlewares and routes and register them inside the express app and get an API up and running within the same project. I am not aware of any downside of this hack yet.

Point to be noted that I have created the app using express option using create-nuxt-app cli.

@tareq89 I am essentially doing what you are showing, but in my application I have a POST route to hit that I have to hit like this in my fetch,
fetch('/api')

So if I want to hit that route from outside of the application and I try this,

fetch('http://example.com/api')

I get a 404.

Did you have to update anything in a nuxt.config to get that to work? Or does that work out of the box for you?

I am also using Nuxt cli to generate my boilerplate with express as the server.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nassimbenkirane picture nassimbenkirane  Â·  3Comments

shyamchandranmec picture shyamchandranmec  Â·  3Comments

bimohxh picture bimohxh  Â·  3Comments

maicong picture maicong  Â·  3Comments

gary149 picture gary149  Â·  3Comments