Skip to content

Commit c99de21

Browse files
authored
Use named routes on Inertia with Ziggy (#314)
1 parent 21a4469 commit c99de21

14 files changed

+35
-33
lines changed

src/Console/InstallCommand.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ protected function livewireRouteDefinition()
247247
protected function installInertiaStack()
248248
{
249249
// Install Inertia...
250-
(new Process(['composer', 'require', 'inertiajs/inertia-laravel', 'laravel/sanctum:^2.6'], base_path()))
250+
(new Process(['composer', 'require', 'inertiajs/inertia-laravel', 'laravel/sanctum:^2.6', 'tightenco/ziggy'], base_path()))
251251
->setTimeout(null)
252252
->run(function ($type, $output) {
253253
$this->output->write($output);

stubs/inertia/resources/js/Jetstream/ConfirmsPassword.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
startConfirmingPassword() {
8181
this.form.error = '';
8282
83-
axios.get('/user/confirmed-password-status').then(response => {
83+
axios.get(route('password.confirmation')).then(response => {
8484
if (response.data.confirmed) {
8585
this.$emit('confirmed');
8686
} else {
@@ -97,7 +97,7 @@
9797
confirmPassword() {
9898
this.form.processing = true;
9999
100-
axios.post('/user/confirm-password', {
100+
axios.post(route('password.confirm'), {
101101
password: this.form.password,
102102
}).then(response => {
103103
this.confirmingPassword = false;

stubs/inertia/resources/js/Layouts/AppLayout.vue

+14-14
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
<div class="flex">
88
<!-- Logo -->
99
<div class="flex-shrink-0 flex items-center">
10-
<a href="/dashboard">
10+
<inertia-link :href="route('dashboard')">
1111
<jet-application-mark class="block h-9 w-auto" />
12-
</a>
12+
</inertia-link>
1313
</div>
1414

1515
<!-- Navigation Links -->
1616
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
17-
<jet-nav-link href="/dashboard" :active="$page.currentRouteName == 'dashboard'">
17+
<jet-nav-link :href="route('dashboard')" :active="$page.currentRouteName == 'dashboard'">
1818
Dashboard
1919
</jet-nav-link>
2020
</div>
@@ -46,11 +46,11 @@
4646
Manage Account
4747
</div>
4848

49-
<jet-dropdown-link href="/user/profile">
49+
<jet-dropdown-link :href="route('profile.show')">
5050
Profile
5151
</jet-dropdown-link>
5252

53-
<jet-dropdown-link href="/user/api-tokens" v-if="$page.jetstream.hasApiFeatures">
53+
<jet-dropdown-link :href="route('api-tokens.index')" v-if="$page.jetstream.hasApiFeatures">
5454
API Tokens
5555
</jet-dropdown-link>
5656

@@ -63,11 +63,11 @@
6363
</div>
6464

6565
<!-- Team Settings -->
66-
<jet-dropdown-link :href="'/teams/' + $page.user.current_team.id">
66+
<jet-dropdown-link :href="route('teams.show', $page.user.current_team)">
6767
Team Settings
6868
</jet-dropdown-link>
6969

70-
<jet-dropdown-link href="/teams/create" v-if="$page.jetstream.canCreateTeams">
70+
<jet-dropdown-link :href="route('teams.create')" v-if="$page.jetstream.canCreateTeams">
7171
Create New Team
7272
</jet-dropdown-link>
7373

@@ -118,7 +118,7 @@
118118
<!-- Responsive Navigation Menu -->
119119
<div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">
120120
<div class="pt-2 pb-3 space-y-1">
121-
<jet-responsive-nav-link href="/dashboard" :active="$page.currentRouteName == 'dashboard'">
121+
<jet-responsive-nav-link :href="route('dashboard')" :active="$page.currentRouteName == 'dashboard'">
122122
Dashboard
123123
</jet-responsive-nav-link>
124124
</div>
@@ -137,11 +137,11 @@
137137
</div>
138138

139139
<div class="mt-3 space-y-1">
140-
<jet-responsive-nav-link href="/user/profile" :active="$page.currentRouteName == 'profile.show'">
140+
<jet-responsive-nav-link :href="route('profile.show')" :active="$page.currentRouteName == 'profile.show'">
141141
Profile
142142
</jet-responsive-nav-link>
143143

144-
<jet-responsive-nav-link href="/user/api-tokens" :active="$page.currentRouteName == 'api-tokens.index'" v-if="$page.jetstream.hasApiFeatures">
144+
<jet-responsive-nav-link :href="route('api-tokens.index')" :active="$page.currentRouteName == 'api-tokens.index'" v-if="$page.jetstream.hasApiFeatures">
145145
API Tokens
146146
</jet-responsive-nav-link>
147147

@@ -161,11 +161,11 @@
161161
</div>
162162

163163
<!-- Team Settings -->
164-
<jet-responsive-nav-link :href="'/teams/' + $page.user.current_team.id" :active="$page.currentRouteName == 'teams.show'">
164+
<jet-responsive-nav-link :href="route('teams.show', $page.user.current_team)" :active="$page.currentRouteName == 'teams.show'">
165165
Team Settings
166166
</jet-responsive-nav-link>
167167

168-
<jet-responsive-nav-link href="/teams/create" :active="$page.currentRouteName == 'teams.create'">
168+
<jet-responsive-nav-link :href="route('teams.create')" :active="$page.currentRouteName == 'teams.create'">
169169
Create New Team
170170
</jet-responsive-nav-link>
171171

@@ -236,15 +236,15 @@
236236
237237
methods: {
238238
switchToTeam(team) {
239-
this.$inertia.put('/current-team', {
239+
this.$inertia.put(route('current-team.update'), {
240240
'team_id': team.id
241241
}, {
242242
preserveState: false
243243
})
244244
},
245245
246246
logout() {
247-
axios.post('/logout').then(response => {
247+
axios.post(route('logout')).then(response => {
248248
window.location = '/';
249249
})
250250
},

stubs/inertia/resources/js/Pages/API/ApiTokenManager.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@
225225
226226
methods: {
227227
createApiToken() {
228-
this.createApiTokenForm.post('/user/api-tokens', {
228+
this.createApiTokenForm.post(route('api-tokens.store'), {
229229
preserveScroll: true,
230230
}).then(response => {
231231
if (! this.createApiTokenForm.hasErrors()) {
@@ -241,7 +241,7 @@
241241
},
242242
243243
updateApiToken() {
244-
this.updateApiTokenForm.put('/user/api-tokens/' + this.managingPermissionsFor.id, {
244+
this.updateApiTokenForm.put(route('api-tokens.update', this.managingPermissionsFor), {
245245
preserveScroll: true,
246246
preserveState: true,
247247
}).then(response => {
@@ -254,7 +254,7 @@
254254
},
255255
256256
deleteApiToken() {
257-
this.deleteApiTokenForm.delete('/user/api-tokens/' + this.apiTokenBeingDeleted.id, {
257+
this.deleteApiTokenForm.delete(route('api-tokens.destroy', this.managingPermissionsFor), {
258258
preserveScroll: true,
259259
preserveState: true,
260260
}).then(() => {

stubs/inertia/resources/js/Pages/Profile/DeleteUserForm.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
},
9999
100100
deleteUser() {
101-
this.form.post('/user', {
101+
this.form.post(route('current-user.destroy'), {
102102
preserveScroll: true
103103
}).then(response => {
104104
if (! this.form.hasErrors()) {

stubs/inertia/resources/js/Pages/Profile/LogoutOtherBrowserSessionsForm.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@
133133
},
134134
135135
logoutOtherBrowserSessions() {
136-
this.form.post('/user/other-browser-sessions', {
136+
this.form.post(route('other-browser-sessions.destroy'), {
137137
preserveScroll: true
138138
}).then(response => {
139139
if (! this.form.hasErrors()) {

stubs/inertia/resources/js/Pages/Profile/UpdatePasswordForm.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
7373
methods: {
7474
updatePassword() {
75-
this.form.put('/user/password', {
75+
this.form.put(route('user-password.update'), {
7676
preserveScroll: true
7777
}).then(() => {
7878
this.$refs.current_password.focus()

stubs/inertia/resources/js/Pages/Profile/UpdateProfileInformationForm.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
this.form.photo = this.$refs.photo.files[0]
113113
}
114114
115-
this.form.post('/user/profile-information', {
115+
this.form.post(route('user-profile-information.update'), {
116116
preserveScroll: true
117117
});
118118
},
@@ -132,7 +132,7 @@
132132
},
133133
134134
deletePhoto() {
135-
this.$inertia.delete('/user/profile-photo', {
135+
this.$inertia.delete(route('current-user-photo.destroy'), {
136136
preserveScroll: true,
137137
}).then(() => {
138138
this.photoPreview = null

stubs/inertia/resources/js/Pages/Teams/CreateTeamForm.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
7373
methods: {
7474
createTeam() {
75-
this.form.post('/teams', {
75+
this.form.post(route('teams.store'), {
7676
preserveScroll: true
7777
});
7878
},

stubs/inertia/resources/js/Pages/Teams/DeleteTeamForm.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
},
8181
8282
deleteTeam() {
83-
this.form.delete('/teams/' + this.team.id, {
83+
this.form.delete(route('teams.destroy', this.team), {
8484
preserveScroll: true
8585
});
8686
},

stubs/inertia/resources/js/Pages/Teams/TeamMemberManager.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@
137137
<div class="px-4 py-3"
138138
:class="{'border-t border-gray-200': i > 0}"
139139
@click="updateRoleForm.role = role.key"
140-
v-for="(role, i) in availableRoles"
140+
v-for="(role, i) in availableRoles"
141141
:key="i"
142142
>
143143
<div :class="{'opacity-50': updateRoleForm.role && updateRoleForm.role != role.key}">
@@ -289,7 +289,7 @@
289289
290290
methods: {
291291
addTeamMember() {
292-
this.addTeamMemberForm.post('/teams/' + this.team.id + '/members', {
292+
this.addTeamMemberForm.post(route('team-members.store', this.team), {
293293
preserveScroll: true
294294
});
295295
},
@@ -301,7 +301,7 @@
301301
},
302302
303303
updateRole() {
304-
this.updateRoleForm.put('/teams/' + this.team.id + '/members/' + this.managingRoleFor.id, {
304+
this.updateRoleForm.put(route('team-members.update', [this.team, this.managingRoleFor]), {
305305
preserveScroll: true,
306306
}).then(() => {
307307
this.currentlyManagingRole = false
@@ -313,15 +313,15 @@
313313
},
314314
315315
leaveTeam() {
316-
this.leaveTeamForm.delete('/teams/' + this.team.id + '/members/' + this.$page.user.id)
316+
this.leaveTeamForm.delete(route('team-members.destroy', [this.team, this.$page.user]))
317317
},
318318
319319
confirmTeamMemberRemoval(teamMember) {
320320
this.teamMemberBeingRemoved = teamMember
321321
},
322322
323323
removeTeamMember() {
324-
this.removeTeamMemberForm.delete('/teams/' + this.team.id + '/members/' + this.teamMemberBeingRemoved.id, {
324+
this.removeTeamMemberForm.delete(route('team-members.destroy', [this.team, this.teamMemberBeingRemoved]), {
325325
preserveScroll: true,
326326
preserveState: true,
327327
}).then(() => {

stubs/inertia/resources/js/Pages/Teams/UpdateTeamNameForm.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
8383
methods: {
8484
updateTeamName() {
85-
this.form.put('/teams/' + this.team.id, {
85+
this.form.put(route('teams.update', this.team), {
8686
preserveScroll: true
8787
});
8888
},

stubs/inertia/resources/js/app.js

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { InertiaApp } from '@inertiajs/inertia-vue';
66
import { InertiaForm } from 'laravel-jetstream';
77
import PortalVue from 'portal-vue';
88

9+
Vue.mixin({ methods: { route } });
910
Vue.use(InertiaApp);
1011
Vue.use(InertiaForm);
1112
Vue.use(PortalVue);

stubs/inertia/resources/views/app.blade.php

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
1515

1616
<!-- Scripts -->
17+
@routes
1718
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
1819
<script src="{{ mix('js/app.js') }}" defer></script>
1920
</head>

0 commit comments

Comments
 (0)