Problem with Setting up Ziggy Laravel9/Vue3/inertia/vite #565

Lx45 · 2022-06-03T16:08:33Z

Lx45
Jun 3, 2022

I'm really desperate for help, I cant figure it out on my own.

I try to setup Ziggy.js in my app. -> https://github.com/tighten/ziggy

First I install ziggy via

composer require tightenco/ziggy

After that I Add the @routes Blade directive to my main layout (Don't know if this is necessary)

app.blade.php

<!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>

After that I generate the JS file with php artisan ziggy:generate

Next I create an alias.

vite.config.js

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'
import path from 'path'

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

Then I add the Import to my main.ts file

import { createApp, h } from 'vue'
import route 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,Ziggy)
			.mount(el)
	},
})

And I get the following error

[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 { Ziggy } from "./ziggy";
   |                         ^
3  |  import { createInertiaApp } from "@inertiajs/inertia-vue3";
4  |  import { importPageComponent } from "@/scripts/vite/import-page-component";

Answered by bakerkretzmar

Jun 3, 2022

Does the ziggy.js file exist right beside your main.ts? If it does, does importing it as './ziggy.js' (including file extension) work?

Also, your .use() for the Vue plugin should have Ziggy's Vue plugin as its first argument, not the route function.

- import route from 'ziggy';
+ import { ZiggyVue } from 'ziggy'; // if this doesn't work, try importing it from `ziggy/dist/vue`

- .use(plugin,Ziggy)
+ .use(ZiggyVue, Ziggy)

Take a look at the docs for using the Vue plugin.

View full answer

bakerkretzmar · 2022-06-03T16:17:05Z

bakerkretzmar
Jun 3, 2022
Maintainer

Does the ziggy.js file exist right beside your main.ts? If it does, does importing it as './ziggy.js' (including file extension) work?

Also, your .use() for the Vue plugin should have Ziggy's Vue plugin as its first argument, not the route function.

- import route from 'ziggy';
+ import { ZiggyVue } from 'ziggy'; // if this doesn't work, try importing it from `ziggy/dist/vue`

- .use(plugin,Ziggy)
+ .use(ZiggyVue, Ziggy)

Take a look at the docs for using the Vue plugin.

13 replies

bakerkretzmar May 5, 2023
Maintainer

@khalidmaquilang there are three different ways to load your Ziggy config—using the @routes Blade directive to output it in a view, running php artisan ziggy:generate to store it in a file, or retrieving it manually at runtime.

If you use php artisan ziggy:generate, you have to re-run that command to update the file whenever your routes change, and you have to import the file and pass it into the route() function or the Vue plugin.

Depending which preset/stack you use, Jetstream either uses the @routes Blade directive or shares the routes with Inertia at runtime in a middleware. See https://github.com/search?q=repo%3Alaravel%2Fjetstream+ziggy&type=code.

The original example in this discussion uses both @routes and php artisan ziggy:generate, which isn't necessary.

khalidmaquilang May 6, 2023

@bakerkretzmar i followed the jetstream way but im receiving Ziggy is not defined

bakerkretzmar May 7, 2023
Maintainer

I'm happy to try to help but you need to share as much information as possible. Please reply or open a new issue/discussion with complete code examples of what you're doing, your Ziggy config and app setup, and exactly the error you're getting.

khalidmaquilang May 7, 2023

@bakerkretzmar soon.. i just used their command and install jetstream automatically.. ill just post another issue if i will encounter that problem in my future projects.. thank you!

buzdyk Apr 18, 2024

solution that worked for me (Laravel 10, Vue 3):

Composer dependency: "tightenco/ziggy": "^1.0" (not 2!!)

app.js :

import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'

Vue.use(ZiggyVue)

AMINEAMIRI · 2022-09-30T14:27:33Z

AMINEAMIRI
Sep 30, 2022

hii,
i have the same probleme in deploy with cyclicapp thats the error ; Error: Could not load /tmp/myproject/vendor/tightenco/ziggy/dist/vue.es (imported by resources/js/app.js): ENOENT: no such file or directory, open '/tmp/myproject/vendor/tightenco/ziggy/dist/vue.es',

`app.js
import "./bootstrap";
import "../css/app.css";

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "ziggy";

const appName =
window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
title: (title) => ${title} - ${appName},
resolve: (name) =>
resolvePageComponent(
./Pages/${name}.vue,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});`

`package.json:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "node vite.config.js"
},`

`vite.config.js:
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
plugins: [
laravel({
input: "resources/js/app.js",
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue.es"),
},
},
});
`

Any Help please

6 replies

AMINEAMIRI Sep 30, 2022

still have the same probleme , any other solutions ? thank you alot

[vite:load-fallback] Could not load /tmp/myproject/vendor/tightenco/ziggy/dist/vue.es.js (imported by resources/js/app.js): ENOENT: no such file or directory, open '/tmp/myproject/vendor/tightenco/ziggy/dist/vue.es.js'
error during build:
Error: Could not load /tmp/myproject/vendor/tightenco/ziggy/dist/vue.es.js (imported by resources/js/app.js): ENOENT: no such file or directory, open '/tmp/myproject/vendor/tightenco/ziggy/dist/vue.es.js'

bakerkretzmar Sep 30, 2022
Maintainer

Does the /tmp/myproject/vendor/tightenco/ziggy/dist/vue.es.js file exist?

AMINEAMIRI Sep 30, 2022

yes the file exist , in local it works fine , but whene i try to deploy the project with cyclicapp it gives me this error

bakerkretzmar Sep 30, 2022
Maintainer

I don't know what cyclicapp is, are you sure the file exists during the deployment and in production? I need more information to try to help figure out what's going on, but it sounds like a configuration/deployment issue if it works locally.

AMINEAMIRI Sep 30, 2022

cyclicapp is a pass like heroku, thank you very much for your help I will try to find another free fullstack PASS

craigrileyuk · 2022-10-07T22:11:09Z

craigrileyuk
Oct 7, 2022

AdminUI: Inertia Routes

Company I work for made this to streamline our use of Inertia with named routes, MIT and thought it might be useful to some of you all.

Gets you up and running with named routes in Inertia/Vue3 with around 4 lines of code, no @routes directive, exported JS files or API routes setup needed.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem with Setting up Ziggy Laravel9/Vue3/inertia/vite #565

{{title}}

Replies: 3 comments 19 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Problem with Setting up Ziggy Laravel9/Vue3/inertia/vite #565

Replies: 3 comments · 19 replies

bakerkretzmar Jun 3, 2022 Maintainer

bakerkretzmar May 5, 2023 Maintainer

bakerkretzmar May 7, 2023 Maintainer

bakerkretzmar Sep 30, 2022 Maintainer

bakerkretzmar Sep 30, 2022 Maintainer

Replies: 3 comments 19 replies

bakerkretzmar
Jun 3, 2022
Maintainer

bakerkretzmar May 5, 2023
Maintainer

bakerkretzmar May 7, 2023
Maintainer

bakerkretzmar Sep 30, 2022
Maintainer

bakerkretzmar Sep 30, 2022
Maintainer