Can I Nuxt universal mode (not spa) to run their middleware and query to MYSQL? How?

Hello.

If I set Nuxt as Universal - it means I can use the backend or not? And if you can how to make such a request to the database?

Even tried to install with Express (choose option when installing Nuxt) but when trying to build the middleware in server/index.js - there are some strange errors - simple examples not found...

Please explain how exactly I can use the backend in Nuxt.js to work with the database (mysql)?

I initially thought to do that separately Express on a different port, but now decided that this will be a crutch - probably it is possible somehow differently? Type Nuxt way))

Thank you.
March 23rd 20 at 19:24
2 answers
March 23rd 20 at 19:26
Solution
I'm just learning JS and NUXT, but in the self-study did so.
Ask more experienced to point out errors:

// nuxt.config.js
...
 serverMiddleware: [
'~api/api'
],
...


//api.js

import {pool} from "./db";

const express = require('express');
const app = express();

app.get('/valute', function (req, res) {
 const sql = "SELECT * FROM `valute-xml`";

 pool.query(sql, function (error, results, fields) {
 if (error) throw error;
Res. json(results);
});
});


//db.js

const mysql = require('mysql2');

const pool = mysql.createPool({
 connectionLimit: 100,
 host: ",
 user: ",
 password: ",
 database: "
});

export {pool}


Then with the help of axios address, e.g. localhost:3000/api/valute
Thanks bro!

Also came something.

Now I have another really sad - I thought there must be a way to directly transfer data from serverMiddleware in Vue, but apparently the only option is via http (as in your example).

Eeehhhh... :/ - Lauretta57 commented on March 23rd 20 at 19:29
Why? If it is necessary to fill the vault Vuex before displaying the page, then you can do this:

// ~/store/index.js

export const actions = {
 async nuxtServerInit({dispatch}) {
 try {
 await dispatch('valute/fetchValutes')
 } catch (e) {
 throw e
}
}


// ~/store/valute.js
export const state = () => ({
 valutes: []
})

export const mutations = {
 setValutes(state, payload){
 state.valutes = payload
}
}

export const actions = {
 async fetchValutes({commit}) {
 try {
 const valutes = await this.$axios.$get('http://localhost:3000/api/valute')
 commit('setValutes', valutes)
 } catch (e) {
 throw e
}
},
}


And on the page immediately deduce information from the repository - coy87 commented on March 23rd 20 at 19:32
@coy87, Yes, thank you, good code.

But I just thought that it is possible to do without GET-requests at all, well, something to transmit the data "inside" Nuxt ))) (I still poorly represent the structure of data flows within Nuxt universal) - Lauretta57 commented on March 23rd 20 at 19:35
March 23rd 20 at 19:28
Nuxt is a frontend and backend rendering. (server-side rendering != backend)

The tasks of the backend it does not perform and is not made for this.

I initially thought to do that separately Express on a different port,

and working API on a separate domain/port, nuxt itself and refers to the IPA. IPAS can be made on anything, not just JS.
Then I suggested already:

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

it seems that back to organize direct on nexte - may

...but it's not sure))

Try - then tell us what happened and what not))

Otherwise, nifiga not understand - why then when you install you can choose Express or Koa - Lauretta57 commented on March 23rd 20 at 19:31
@Lauretta57, it does not make nuxt backend. Still nuxt max as a proxy between the API and front stands. Maybe something to tweak it a little in the process requests. Middleware is not a method of implementing bucindolol certainly. - harley.Bechtelar commented on March 23rd 20 at 19:34

Find more questions by tags Vue.js