Level 4
Any idea from anyone?
Mar 24, 2022
10
Level 4
Displaying Pagination Link
I am trying to work on navigation on my laravel and nuxtjs navigation so i did this in my controller
public function index()
{
$posts = Post::orderBy('created_at', 'desc')->paginate(10)->through(fn($post) =>[
'id' => $post->id,
'title' => $post->title,
'body' => $post->body,
'excerpt' => $post->excerpt,
'updated_at' => $post->updated_at->format('Y/m/d H:i'),
]);
return response()->json($posts);
}
and in my NuxtJs file i did the following
<Component
:is="link.url ? 'NuxtLink' : 'span'"
v-for="(link, i) in posts.links"
:href="link.url"
to="/"
:key="i"
v-html="link.label"
class="px-1"
:class="link.url ? '' : 'text-blueGray-500'"
/>
The navigation was displayed but the link did not output correctly as it was output like this http://localhost/api/posts?page=2 which is wrong and goes to different page because the nuxtjs url is localhost:3000
How can i correct this?
Level 15
Those links are created using the. value on APP_URL from the .env file.
Update the env file to reflect your actual URL:
APP_URL=http://localhost:3000
Level 4
@undeportedmexican That does not work
.env
APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost
LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=sail
DB_PASSWORD=password
BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120
SESSION_DOMAIN=localhost
MEMCACHED_HOST=memcached
REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
SANCTUM_STATEFUL_DOMAINS=localhost:3000
nuxt.config.js
axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
baseURL: 'http://localhost',
credentials: true
},
Level 15
@monstajamss I'm seeing the .env file you posted, and I see that the APP_URL property is still set to http://localhost instead of http://localhost:3000
Did you share an old version of the .env file?
Level 4
@undeportedmexican i am using laravel as api even if i change APP_URL it still does not affect it
Level 4
This is how the url is http://localhost/api/posts?page=1
Level 4
IF only i can change path or url in the pagination array from using localhost:8000 to localhost:3000 anyone has an idea on that??
Level 15
@monstajamss So, it's using localhost:8000 or localhost by itself?
Level 75
@monstajamss see https://laracasts.com/discuss/channels/vue/paginating-from-my-response
But you can use location to get localhost:3000.
Level 8
I know its an old post but I had the same issue recently,
In your .env :
FRONTEND_URL=localhost:3000
in config/app.php :
'frontend_url' => env('FRONTEND_URL', 'http://localhost:3000'),
In your paginator code:
return Product::paginate()->setPath(config('app.frontend_url').'/products');
Will return the following url :
http://localhost:3000/products?page=1
Please or to participate in this conversation.