How to use vue js with a voyager project Laravel

[thsdeveloper]

• Laravel Version: 5.5
• Voyager Version: 1.1
• PHP Version: 7.1
• Database Driver & Version: 5.6

Description:

I have a laravel project installed running with a voyager package. How can I use vue js and implement this technology in my voyager project? Remember that I'm using the substitutions of views.

Steps To Reproduce:

[fletch3555]

How do you expect to use VueJS? Within Voyager or external to voyager? If external, then you don't need to do anything related to Voyager, just make it happen like you would any other site

[thsdeveloper]

This is the question. I need to use the vuejs within the voyager project. Rewriting the views browse.blade.php and edit-add.blade.php. I need to use the vues within those views. resources/views/vendor/voyager/slug-name @fletch3555

[fletch3555]

Why do you need to use it in Voyager's views? We already use vue on a couple views (media manager comes to mind), so it's possible, but you'll have to build your custom components into Voyager's app.js, or inject a new JS file with your vue component in it. This is a lot of work for something that doesn't provide much benefit

[thsdeveloper]

I found an option to insert an app.js file into the voyager configuration file. But when I put the file it returns me the following error. Uncaught TypeError: $(...).perfectScrollbar is not a function @fletch3555 @greut @wuwx @cbtech @

file config/voyager.php 'additional_js' => [ 'js/app.js', ],

[fletch3555]

Does your js code make use of perfectScrollbar?

[bradapeter]

@thsdeveloper there is a hooks name polls, which use the vue. you should try to hooks:install it and try to code review. maybe help to you

[vicmans]

How I use my custom Vue components? In the Voyager assets do not include axios.

[vicmans]

@thsdeveloper I did this:

1. I copied the files in the voyager assets from the vendor folder to my project assets
2. Change the package.json to add the dependencies in the voyager assets (don't repeat the Vue dependency)
3. Run npm install to get the packages
4. Combine yours app.js with the voyager's app.js
5. Compile the assets npm run dev or run prod
6. In the master.blade.php change the app.js to your compiled (override the view)

I haved a issue with bootstrap.js and I use with the CDN.

I use Laravel 5.5 and PHP 7.2

[emptynick]

Also the Database tool is Vue. You can take a look at it for reference.

[ux-engineer]

I have a question related to this... I have Laravel Spark + Voyager installation. Spark comes with it's own package.json dependencies and resources file structure much similar to Laravel's base installation.

It has been working fine for months. Until now that I manually checked if Voyager has new packages in package.json ... noticed I never had added these deps into my package.json. And then I ran into problems with Vue single file components not building anymore.

Anyhow, I just installed a fresh L5.5 and then Voyager into it. Now package.json is identical to what L5.5 repo has:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.17",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
    }
}

While Voyager repo has this file: https://github.com/the-control-group/voyager/blob/1.0/package.json

What is happening here, how is voyager's package.json not included/merged with Laravel's package.json – is it because of that "private": true ?

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "ace-builds": "^1.2.6",
    "animate.css": "^3.5.2",
    "bootstrap": "^3.3.7",
    "bootstrap-datepicker": "^1.6.4",
    "bootstrap-datetimepicker": "0.0.7",
    "bootstrap-switch": "^3.3.4",
    "bootstrap-toggle": "^2.2.2",
    "brace": "^0.10.0",
    "cropperjs": "^1.0.0",
    "datatables-bootstrap3-plugin": "^0.5.0",
    "datatables.net": "^1.10.15",
    "datetimepicker": "^0.1.38",
    "dropzone": "^5.0.1",
    "highlight": "^0.2.4",
    "icheck": "^1.0.2",
    "jquery-match-height": "^0.7.2",
    "jquery-sortable": "^0.9.13",
    "jquery-ui": "^1.12.1",
    "perfect-scrollbar": "^0.7.1",
    "readmore-js": "^2.1.0",
    "select2": "^4.0.3",
    "simplemde": "^1.11.2",
    "slugify": "^1.1.0",
    "tinymce": "^4.6.3",
    "toastr": "^2.1.2",
    "vue": "^2.3.4"
  }
}

[emptynick]

Why should Voyagers package.json be merged with Laravels?! Those are two different npm "projects"

[vicmans]

Can I use the app.js of Voyager and the app.js of my Laravel project? It repeat included scripts as vue and jquery packages. Will generate conflicts?

[mtimbs]

To use Vuejs within a Voyager project you will need to remove the default Laravel jQuery load in the bootstrap.js file within your resources/assets/js directory. This is causing a conflict with the Voyager jQuery version.

Just find this section and remove it completely.

//app/resources/assets/js/bootstrap.js

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

You will then also need to go to the master.blade file within the vendor files and add an id="app" to the main content wrapper.

You can find this around line 99 in the file and there is a comment within the blade file. The div you are looking for has a container-fluid class on it.

<!-- Main Content -->
        <div class="container-fluid" id="app">
            <div class="side-body padding-top">
                @yield('page_header')
                <div id="voyager-notifications"></div>
                @yield('content')
            </div>
        </div>

[emptynick]

Don't change anything under /vendor.

[zulham724]

there is conflict with jquery inside bootstrap.js that require in the app.js just uncomment single line require jquery and all working fine. i have added it successfuly in my laravel voyager project, cause i cannot add multiple data dynamically when i have hasMany relationship, so i think to add some vue component inside voyager create blade so i can insert many data to related table im override voyager views to mine so i think it wouldn't break other bread script

[fletch3555]

Please don't comment on really old/closed issues. This has gone untouched for nearly a year and was for an older version.