Импорт npm пакет в .blade

Question

Я использую laravel и vue js в проекте, над которым я работаю. Я установил пакет vue-color npm, чтобы загрузить палитру цветов. Пакет

npm успешно установлен. Но когда я пытаюсь импортировать его в блейд, он показывает ошибку ниже.

Uncaught SyntaxError: Невозможно использовать оператор импорта вне модуля

Приведенный ниже код покажет, как Я использовал внутри лезвия.

@section
<div>
  .......
</div>    
@endsection
@push('script')
    <script>

        import Photoshop from 'vue-color';

        var manageDisplayStore = new Vue({
            el: '#containerMain',
            name: 'manageDisplayStore',
            components: {
                // Photoshop
            },

Как я могу импортировать пакет?

Answer 1

Вы можете импортировать NPM пакеты в /resources/js/app.js, затем включить /resources/js/app.js в шаблон макета и только потом вызывать его в шаблоне Blade.

app.js, скорее всего, содержит включения NPM пакетов (например, Bootstrap / Vue), если вы использовали один из предустановок по умолчанию при установке Laravel.

Назначьте импорт глобальной переменной, например, window.Photoshop = require('vue-color');

app.js также должен быть включен в ваш макет по умолчанию.

Затем используйте его в шаблоне Blade, как вы использовали. Переменная Photoshop или window.Photoshop должна быть доступна.

Проверьте, готов ли документ перед использованием, или он может быть undefined в зависимости от того, где вы импортируете app.js.

.