How to import js libraries in laravel - blade template?

Question

I want to import this library into my laravel project. I have run npm install vue-simple-lightbox and then in my blade template i have this code

@extends('layouts.app')

@section('content')
    {{-- some html code --}}
    <div class="row">
    </div>
    <div class="row">
        <lightbox id="mylightbox" :images="images" :image_class="'img-responsive img-rounded'" :album_class=" 'my-album-class' " :options="options"></lightbox>
    {{-- more html code --}}   
    </div>
@endsection

<style type="text/css">
    .dropdown, .dropdown-menu {
        width: 100%;
    }
</style>

@section('scripts')
    // import the library here?
    <script type="text/javascript">
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    images : [
                        {
                            src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
                            title : 'Image 2'
                        },
                        {
                            src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img2.jpg',
                            title : 'Image 3'
                        },
                        {
                            src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img3.jpg',
                            title : ''
                        },
                        {
                            src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img4.jpg',
                            title : ''
                        },
                      ],
                      options : {
                        closeText : 'X'
                      }
                };
            },
            mounted() {
            },
        });
    </script>
@endsection

Where should i import the library? I tried to import it into app.js file using this code window.Lightbox = require('vue-simple-lightbox');, but then how do i use it? It seems the blade template have no idea what is 'lightbox'.

I am getting this error

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

What is the correct way of importing the library and then use it inside the blade template? Thanks!

It's generally bad practice to have complex JavaScript logic in the markup file. You should separate it out in a JS file and then you can use import statements and then compile the file using laravel mix — apokryfos

Marina Mosti Marina Mosti · Accepted Answer · 2018-09-21T13:41:58

Extract your js code to a single file, blade templates are not compiled and it wont work if you import it there.

So copy everything over to say, app.js, then include it via a script tag

Inside app.js you can import lightbox from 'vue-simple-lightbox'

Now, make sure you add it to your webpack.mix file through

.js('path/to/app.js', 'public/js/app.js')

That way the library will get compiled into the asset.

Now, regarding the VUE tempalte not finding the lightbox component.
You forgot to add the component part of the Vue instance:

import Lightbox from 'vue-simple-lightbox'

export default {
components: {
  Lightbox //HERE
},
...

How to import js libraries in laravel - blade template?

2 Answers