New format for universal componets

[yogeshgalav]

The Nuxt team could achieve something like inertia or call api based on same component path,
where server logic for particular page or vue component can be written in same file.
it may be achieved using different server section or different file in same path as well.

Current Method

If one has to create api or any error or bug occurs in api,
One has to follow following path in most case

• Find respective route in route file
• Open controller file
• find respective function

Proposed method 1

Having server code in same file

//  /users/[id].vue
<middleware>
  middleware.add({ auth });
  meta.change('title', 'profile');
</middleware>
<server>
  import { request, response, session, cookies } from '@nuxt/http';
  let user = db.table('users').where('id', request.user_id).first();
  response({user});
</server>
<script setup>
  let response = fromServer({'user'})
  //do something with user on client
</script>

Proposed method 2

Writing server code in different file but in same path

// /users/[id].server.js
import { request, response, session, cookies } from '@nuxt/http';
import { middleware, meta, validate } from '@nuxt/app';

await middleware(auth);
meta(()=>{'title': 'profile'});
const rules = validate('rules', {
  'full_name':'required|string|max:255'
});
function get(){
  let user = db.table('users').where('id', request.user_id).first();
  response({user});
}
function post(){
 request.validate(rules);
}

in this way we can keep our client files as it is

//  /users/[id].vue
<script setup>
  function getUserDetails(){
    let response = useServer('get', {
      //query params
    });
  }
  function submitUserDetails(){
    useValidate(formData);
    let response = useServer('post', {
      // form data
    });
  }
  //do something with user on client
</script>

[NyllRE]

that sounds like an amazing idea to be honest, but I believe props and server data are different, I would suggest something like this:

let { response, error, refresh } = defineResponse<{
   user: {
      name: String
      id: UUID
      ...
   }
}>()

[yogeshgalav]

@NyllRE
The nuxt can call api with same web path with prefix "api" and response parameters based on defineResponse,
But how will we define other api path or delete, put method?
or Graphql api's?

I was suggesting we could use inertiaJs concept in which we first run server side logic then loads the page with respective props.
It also helps to implement middleware, gates or policy on server side only.

[Zamion101]

I agree there should be a better server-client seperation where we can just navigate to a route and wait server-side actions to be completed while the client is fully functional. Yes I know there is a useFetch(...,{lazy:true}) to achieve similar thing. The vision here is the seperation of the server side logic such as querying a database (which should IMO always be in backend) or processing away from client.

It will change and definitely improve the way we write.

My suggestion for this is;

<script server lang="ts">
const someData = ref("");

// some logic here

// (extra idea)
onServerEventTrigger("refreshData", () => {
// use another logic to mutate someData

});

respondWith({
 someData
});
</script>

<script setup lang="ts">
const { someData } = fromServer<T>();

// use someData here reactively


triggerServerEvent("refreshData");
</script>

Additional Information about onServerEventTrigger:

What I thought for onServerEventTrigger is the similiar way of using useFetch on /api/ endpoint. Rather than global scope accesible endpoint, it is component scope api endpoint that how it is handled with useAsyncData + $fetch. Nuxt can run the associated function on the server and send the difference between two data. Which in the client side be referenced and mutated, with that approach i think it allows allows to be reactive on the client side and not on the server side.

[yogeshgalav]

@Zamion101
If we have 4 serverEventTrigger: createData, updateData, fetchData and deleteData
You would return same response with "someData", right?

How do we optimize response then?
Also I think it's not possible to see/check reactivity changes of server variable, hence using ref on server doesn't make sense.

[Zamion101]

What I thought for onServerEventTrigger is the similiar way of using useFetch on /api/ endpoint. Rather than global scope accesible endpoint, it is component scope api endpoint that how it is handled with useAsyncData + $fetch. Nuxt can run the associated function on the server and send the difference between two data. Which in the client side be referenced and mutated, with that approach i think it allows allows to be reactive on the client side and not on the server side. It was my mistake to use ref in server side it should be just const or let if it should be mutable.