Laravel, Vue3, Inertia, Vite implement Ziggy

Im currently programming a applictation with the above mentioned stack and wanted to implement ziggy, but im lost.

I added ziggy via composer composer require tightenco/ziggy

Then added the @blade in the main blade file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;0,700;1,500&display=swap" rel="stylesheet">
		@routes
		<title>Laravel with Inertia</title>
		@vite
	</head>
	<body class="antialiased bg-gray-900">
		@inertia
	</body>
</html>

But it still wont work like this


<Link :href="$route('users.create')">Create User</Link>

The Inertia docs mention something like


app.config.globalProperties.$route = route

But I dont know where to put it ?

rodrigo.pedra

3 years ago

Level 56

Please see Ziggy's docs on how to setup it with Vue:

https://github.com/tighten/ziggy#vue

Lx45_

3 years ago

Level 3

@rodrigo.pedra when i add ziggy to my main.ts file like this it does not work.

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { ZiggyVue } from 'ziggy';
import { Ziggy } from './ziggy';
import { importPageComponent } from '@/scripts/vite/import-page-component'

createInertiaApp({
	resolve: (name) => importPageComponent(name, import.meta.glob('../views/pages/**/*.vue')),
	setup({ el, app, props, plugin }) {
		createApp({ render: () => h(app, props) })
			.use(plugin,ZiggyVue, Ziggy)
			.mount(el)
	},
})

[plugin:vite:import-analysis] Failed to resolve import "ziggy" from "resources/scripts/main.ts". Does the file exist?

rodrigo.pedra

3 years ago

Level 56

@Lx45_ on the preceding session on Zyggy's docs:

https://github.com/tighten/ziggy#javascript-frameworks

Right above the one I linked before, it outlines what needs to be done so JavaScript bundlers can find ziggy.

This setup is needed as Ziggy JavaScript files lives under their composer's vendor folder and not in node_modules, so bundlers like webpack and rollup, which Vite uses under the hood, won't look outside node_modules by default.

There is a sub-topic inside the section linked above, which mentions importing zyggy's JavaScript code as a package.json dependency, which should be easier to configure:

https://github.com/tighten/ziggy#spas-or-separate-repos

I advise you to read Ziggy full docs with you encounter any further issues. It is very well-written and very detailed.

PS.: as you mentioned to be using TypeScript, the docs also mentions how to add TypeScript type support:

https://github.com/tighten/ziggy#typescript-support

Lx45_

3 years ago

Level 3

@rodrigo.pedra Ive created the ziggy.js file and created the alias in my vite file but I still get the following error message

[plugin:vite:import-analysis] Failed to resolve import "./ziggy" from "resources/scripts/main.ts". Does the file exist?
/Users/lx/Code/focus/resources/scripts/main.ts:3:0
1  |  import { createApp, h } from "vue";
2  |  import { ZiggyVue } from "ziggy";
3  |  import { Ziggy } from "./ziggy";
   |                         ^
4  |  import { createInertiaApp } from "@inertiajs/inertia-vue3";
5  |  import { importPageComponent } from "@/scripts/vite/import-page-component";

vite.config.ts

import {defineConfig} from 'vite'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import laravel from 'vite-plugin-laravel'
import vue from '@vitejs/plugin-vue'
import inertia from './resources/scripts/vite/inertia-layout'


export default defineConfig({
  plugins: [
    inertia(),
    vue(),
    laravel({
      postcss: [
        tailwindcss(),
        autoprefixer(),
      ],
    }),
  ],
  resolve: {
    alias: {
      'ziggy': "vendor/tightenco/ziggy/dist/vue",
    }
  },
  build: {
    rollupOptions: {
      external: 'ziggy'
    }
  }
})

main.ts

import { createApp, h } from 'vue'
import { ZiggyVue } from 'ziggy';
import { Ziggy } from './ziggy';
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { importPageComponent } from '@/scripts/vite/import-page-component'

createInertiaApp({
	resolve: (name) => importPageComponent(name, import.meta.glob('../views/pages/**/*.vue')),
	setup({ el, app, props, plugin }) {
		createApp({ render: () => h(app, props) })
			.use(plugin, ZiggyVue, Ziggy)
			.mount(el)
	},
})

1 like