Registering vue components in Laravel package

问题

I have been trying very hard to register vue component in my own test package developed for laravel. I did even check laravel\horizon and some other packages but I can't figure out how to do it. I'm following Laravel Package Development

so my package is outside my Laravel app. And my package structure is like below:

vendor
    packagename
        resources
            js
                components
                    examplecomponent.vue
                app.js
        AppServiceProvide.php
        package.json
        webpack.mix.js

For the vue component it's just the Laravel's example, and for the app.js too, basically didn't change anything because it's just for testing purpose. I tried to copy vue components to the resources\js\compnents with "vendor:publish" command it's copying it but still not registered in app.js. So the question is what is the best way of registering vue components in Laravel package or vendor? How Laravel Horizon package register it's components, I did check all the source of code of Laravel/horizon there's no command like "npm run" or copying the components and adding it in some place in the main app, it lloks like the npm is checking vendor files searching for package.json file in laravel/horizon and then register the componenets. if it's so why my vue compnents is not registered.

回答1:

There is no best practice, but if you want to do it the easiest way possible, you can do it like this:

const components = require.context('./components', true, /\.vue$/i);
components.keys().map((key) => {
  return Vue.component(`${key.split('/').pop().split('.')[0]}-component`, components(key).default)
});

Any file found deeply (2nd argument to require.context) within your components directory under resources/js will automagically be added as a Vue component with -component added to the end.

So you can just run vendor:publish and your components will appear there automagically. If you're running yarn watch or yarn hot then they will be automagically registered on publish, as well.

The reason this works is because we're telling webpack to create a context that matches our expression within a given directory. You can read more about require.context here.

回答2:

Laravel Horizon Way:

So after reading the entire code of Laravel Horizon I could understand there way which it's like below:

1- First thing you register your vue components like Laravel do for example-component in app.js. so you have to make your own app.js for your Laravel package inside resourses\js:

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

2- second make webpack.mix.js file in the root of your package and copy your app.js into public\vendor\packagename\ like below:

mix
  .options({
    terser: {
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }
  })
  .setPublicPath("public")
  .js("resources/js/app.js", "public")
  .version()
  .webpackConfig({
    resolve: {
      symlinks: false,
      alias: {
        "@": path.resolve(__dirname, "resources/js/")
      }
    },
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
  });

3- run "npm run dev" in your package to compile your app.js in public folder inside your package.

4- publish your public\app.js file in appserviceprovider.php of your package:

$this->publishes([
                __DIR__.'/../resources/views' => resource_path('views/vendor/xoadmin'),
            ], 'views');

5- now in your resource view files you can add the app.js file like below:

<script src="{{asset(mix('app.js', 'vendor/packagename'))}}"></script>

6- make a command to publish the app.js file from your package public folder to laravel's public\vendor\package folder.

<?php

namespace Vendor\PackageName\Console;

use Illuminate\Console\Command;

class AssetsCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'packagename:assets';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Re-publish the packagename assets';

    /**
     * Execute the console command.
     *
     * @return void
     */
    public function handle()
    {
        $this->call('vendor:publish', [
            '--tag' => 'packagename-assets',
            '--force' => true,
        ]);

        $this->call('vendor:publish', [
            '--tag' => 'views',
            '--force' => true,
        ]);
    }
}

All of the codes above can be found in Laravel Horizon Github repository. I'm just explaining the way to make it easier for people to understand.

来源：https://stackoverflow.com/questions/60347399/registering-vue-components-in-laravel-package