Access apps from the browser
For a local environment on the backend side using Herd/Valet Laravel provides two ways to visit your application in the browser:
- Running
php artisan serve
:http://127.0.0.1:80
- Using Vite
npm run dev
to:http://backend-app.test
Both ways are useful, ok so now on the frontend side NuxtJS provides an easy way to access your project:
-
npm run dev
:http://127.0.0.1:8000
Set both projects
To test that both technologies can work together just add a backend route in Laravel app and check the response in NuxtJS:
Route::get('hello-world', fn () => 'Hello World');
Now in Nuxt JS we can make a request and get the response in any component:
<script setup>
const { data, pending, error } = await useFetch('http://backend-app.test/hello-world');
</script>
<template>
<h1>{{ data }}</h1>
</template>
If you open the console you are going to be able to see an issue related to CORS.
Solving CORS problem
Go to nuxt.config.ts
file in the root directory and add a route rule object:
export default defineNuxtConfig({
devtools: { enabled: true },
...
routeRules: {
'/api/**': { proxy: { to: "http://backend-app.test/**" } }
}
})
Now just rebuild the frontend by re-running: npm run dev
and it now should show the request response without issues.
Take in mind:
- You do not need to do this for external API services
- You can add a prefix to your backend route like:
http://backend-app.test/api/**
to allow wildcard for api routes only. - If you are using a
JsonResource
wrapper as a response in Laravel usually the response would be available when fetching the data as:data.data
for Nuxt.
Hopefully it is useful and as always Happy Code!
Top comments (2)
I have the question, If I have the nuxt server be my backend. Do I need set cors for server, mean both set cors in nuxt.config.ts and server folder.
Hi, most of the time it is necessary for local development, most of the time every call that comes from a
https
site would not have an issue, like:https://jsonplaceholder.typicode.com/posts