CODEWITHSUNDEEP
laravelvue.jsnpm
NSR
NSR

Reputation: 343

Import npm package in a .blade

I use laravel and vue js in a project that I am developing on. I have installed vue-color npm package in-order to load a colour picker.

npm package installed successfully. But when I try to import it to the blade it shows the error below.

Uncaught SyntaxError: Cannot use import statement outside a module

The below code will show how I used inside the blade.

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

        import Photoshop from 'vue-color';

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

How can I import the package?

Upvotes: 2

Views: 4949

Answers (1)

Nikolai Kiselev
Nikolai Kiselev

Reputation: 6603

You can import NPM packages in your /resources/js/app.js, then include /resources/js/app.js in your layout template and only then call it within a Blade template.

The app.js most probably has inclusions of NPM packages (like Bootstrap / Vue) if you've used one of the default presets when installed Laravel.

Assign the import to global variable something like window.Photoshop = require('vue-color');

The app.js should be included in your layout by default as well.

Then use it in a Blade template like you've used. Photoshop or window.Photoshop variable should be available.

Check for the document being ready before usage or it could be undefined depending where you import the app.js.

Upvotes: 3

Related Questions