ReferenceError: route is not defined / Ziggy Context is undefined

[spam-n-eggs]

Ziggy version

v1.4.5

Laravel version

v8.83.6

Description

After set up, the Ziggy context is not available at all, nor is the route() helper.

Laravel Mix Alias is set up as follows:

mix.alias({
    ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue"),
  })

From the app configuration js:

import { Ziggy } from "../../vendor/tightenco/ziggy/dist";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue";
...
Vue.use(Ziggy);
Vue.use(ZiggyVue);

Ziggy call and context

console.log(Ziggy);
console.log(route("api.devices.update"));

Ziggy configuration

Unfortunately, this could not be done, as Ziggy it not able to be logged.

Route definition

Route::post('devices/update', 'Api\ApiDeviceController@update')->name('api.devices.update');

[bakerkretzmar]

Your Mix alias looks right to me, which means you can import ZiggyVue from just ziggy. The Ziggy config object should be imported from your generated routes file, which you can generate with php artisan ziggy:generate—or, if you're using the @routes Blade directive, you can leave that out and omit the second argument to Vue.use() since the routes will be available globally already.

The two arguments to Vue.use() are the Vue plugin itself and then an optional configuration object that will be passed in to the plugin, so your setup should look something like this:

import { ZiggyVue } from 'ziggy';
import Ziggy from './ziggy.js';

Vue.use(ZiggyVue, Ziggy);