Documentation is missing the requirement of `vendor/tightenco/ziggy/src/js/route.js`

[markokeeffe]

Expected Behavior

Documentation should explain that the route.js file needs to be imported from vendor/tightenco/ziggy/src/js/route.js when using the ziggy:generate artisan command.

Current Behavior

Not documented.

I've put together an example for anyone that uses Laravel Mix and Vue (probably a lot of people who want to use Ziggy!)

[Albvadi]

Hi @markokeeffe, I've tried your example but it doesn't work... :disappointed_relieved:

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path')

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig({
   resolve: {
       alias: {
           ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
       },
   },
})

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

app.js

import route from 'ziggy'
import { Ziggy } from './ziggy'

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

Vue.mixin({
    methods: {
        route: (name, params, absolute) => route(name, params, absolute, Ziggy),
    }
});

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('user-import', require('./components/UserImport.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

Using in vue component

...
<script>
    export default {
        data() {
            return {
                query: "",
                users: [],
                routes: route('users.importUser')
            };
        },
....

Error console when compiling:

ERROR in ./resources/js/app.js
Module not found: Error: Can't resolve './ziggy' in 'C:\xampp\htdocs\proyect\resources\js'
 @ ./resources/js/app.js 2:0-32 15:44-49
 @ multi ./resources/js/app.js ./resources/sass/app.scss

Any idea?? Thanks!

[markokeeffe]

You will need to run the ‘ziggy:generate’ command to output your route declarations to ziggy.js

Mark

On 20 Sep 2019, at 01:33, Albvadi notifications@github.com wrote:

Hi @markokeeffe, I've tried your example but it doesn't work... 😥

webpack.mix.js

const mix = require('laravel-mix'); const path = require('path')

/*	--------------------------------------------------------------------------	Mix Asset Management
Mix provides a clean, fluent API for defining some Webpack build steps
for your Laravel application. By default, we are compiling the Sass
file for the application as well as bundling up all the JS files.

*/

mix.webpackConfig({ resolve: { alias: { ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'), }, }, })

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); app.js

import route from 'ziggy' import { Ziggy } from './ziggy'

/**

• First we will load all of this project's JavaScript dependencies which
• includes Vue and other libraries. It is a great starting point when
• building robust, powerful web applications using Vue and Laravel. */

require('./bootstrap');

window.Vue = require('vue');

Vue.mixin({ methods: { route: (name, params, absolute) => route(name, params, absolute, Ziggy), } });

/**

• The following block of code may be used to automatically register your
• Vue components. It will recursively scan this directory for the Vue
• components and automatically register them with their "basename".
• Eg. ./components/ExampleComponent.vue -> */

// const files = require.context('./', true, /.vue$/i) // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default); Vue.component('user-import', require('./components/UserImport.vue').default);

/**

• Next, we will create a fresh Vue application instance and attach it to
• the page. Then, you may begin adding components to this application
• or customize the JavaScript scaffolding to fit your unique needs. */

const app = new Vue({ el: '#app', }); Using in vue component

...

Githubissues.

Githubissues is a development platform for aggregating issues.