Leveraging External Scripts with Vue.js and Laravel: A Comprehensive Guide

I am new to using vue js and laravel mix, and I am facing some confusion. Previously, I manually loaded scripts without compiling them. However, now that I want to integrate vue js into my project, adding the app.js script at the end of my blade template causes other scripts to stop working. Even after attempting to compile all the scripts and add them together with the app.js file, the issue persists. Below is my webpack code:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
//project files
mix.styles([
    //list of css files...
], 'public/css/allPets.css');

mix.scripts([
    //list of js files...
], 'public/js/allPets.js');

Interestingly, when I use the files allPets.css and allPets.js without the app.js script, everything works fine. But as soon as I add the app.js script, issues like materialize sidebars not functioning properly start occurring.

laravelvue.jsmaterialize

Answer №1

const pluginDirectory =  'resources/assets/plugins/';

mix.js('resources/assets/js/app.js', 'public/js/app.js')
.combine([
  pluginDirectory + 'jquery/jquery.min.js',
  pluginDirectory + 'popper/popper.min.js',
  pluginDirectory + 'bootstrap/bootstrap.min.js',
  pluginDirectory + 'moment/moment.min.js',
  pluginDirectory + 'toastr/toastr.min.js',
  pluginDirectory + 'slimscroll/jquery.slimscroll.js',
  pluginDirectory + 'waves/waves.js',
  pluginDirectory + 'sticky-kit/sticky-kit.min.js',
  pluginDirectory + 'fancybox/jquery.fancybox.pack.js',
  pluginDirectory + 'fancybox/jquery.fancybox.js',
  pluginDirectory + 'fancybox/jquery.mousewheel.pack.js',
   'public/js/app.js',
],'public/js/bundle.min.js')
.sass('resources/assets/sass/style.scss', 'public/css')
.browserSync('laravue');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Best practices for hosting multiple front-end applications using AngularJS along with a single back-end application with Laravel on a shared server

If I were to create an API using Laravel, exclusively for backend operations, with the domain being http://api.whatever.com Furthermore, my intention is to develop 2 distinct AngularJS front-end applications that will utilize this API - one for regular us ...

angularjsnode.jslaravelnginxhosting

Adding the Finishing Flourishes to a Gesture-Controlled VueJs Slide Transition

I'm currently working on a VueJS slideshow that can toggle between different slides based on button input. The main functionality of the slideshow is solid, but I'm facing a small challenge when it comes to applying transitions to the slide compo ...

vue.jstransitionslideshowslide

How do I access the previous and current values in a v-for loop in Vue.js in order to compare them?

I am working on a structural component that involves looping through a list and performing certain actions based on the items: .... <template v-for="(item, INDEX) in someList"> <template v-if="thisIsArrayList(item)"> ...

javascriptvue.jsvue-componentv-forvue-props

Is there a way to align the navbar to the center in bootstrap vue?

I'm trying to center my navbar component, but I can't seem to figure it out. This is my first time attempting this and everything else looks good except for this issue. <template> <div class="container"> <header> &l ...

vue.jsgifbootstrap-vue

Tips for sending entire object through parameters

Trying to understand how to populate a post in a page link using vue router, but I am new to it. <router-link :to{name: "componentName"}></router-link> I attempted using an object like the following, however, without success: <ro ...

vue.jsvue-router

During the compilation process, V8Js encountered an error (ReferenceError) on line 9272, specifying that the

<?php namespace App\Http\Controllers\Auth; use Illuminate\Support\Str; use Illuminate\Support\Facades\DB; use Illuminate\Http\Request; use App\Http\Controllers\Contro ...

laravelvue.jsserver-side-renderingv8js

Visual Studio Code is not properly highlighting imports for Vue 3 using the Composition API

Upon careful examination, it is evident that the import is not highlighted despite the utilization of the component SearchBar. https://i.stack.imgur.com/G4sAm.png Various attempts have been made to rectify this issue including the installation of the Vet ...

vue.jsvisual-studio-code

Laravel 5.7 and Eloquent - Troubleshooting Ajax Issues

API Controller Endpoint Route::get('ajax-BodegasFind','AjaxController@ajaxBodegasFind')->name('ajax.bodegasfind'); Defining "ajaxBodegasFind" Function public function ajaxBodegasFind(Request $Request) { $Tienda = new T ...

ajaxlaraveleloquenthas-many

Managing input changes in a loop using Vue.js

Can someone verify if the code below is correct, or suggest a better approach? I am trying to handle changes in input values. I have a set of custom options: customOptions: { 1:"test 1", 2:"test 2", 3:"test 3", } These ...

vue.js

Problem with vueJS List Transition not being triggered

Within my Vue JS App, I encountered a situation where I have a list of items that change order randomly when the user clicks a button. Despite successfully using Vue.set to dynamically reposition the list elements, I faced an issue with adding a transition ...

javascriptvue.jsvuejs2transition

Can you provide a guide on setting up and utilizing mathlive within NuxtJS?

Can anyone assist me? I am trying to figure out why my code is not working or if I have implemented it incorrectly. I used npm i mathlive to obtain input. However, following the instructions for implementing nuxt plugins in the documentation has not yield ...

javascripttypescriptvue.jsnpmnuxt.js

Dynamically updating Vue.js links based on component property values

In my Vue project's homepage, a series of Bootstrap cards need to contain hyperlink buttons that lead to URLs with a common base URL. The ending of each URL should be determined by the "name" property value of the prop associated with the card. For in ...

vue.jshyperlinkonclickvue-props

What methods can I use to design a splash screen using Vue.js?

I am interested in creating a splash screen that will be displayed for a minimum of X seconds or until the app finishes loading. My vision is to have the app logo prominently displayed in the center of the screen, fading in and out against a black, opaque ...

javascriptvue.js

When working with TypeScript, it's important to note that an implicit 'any' type may occur when trying to use an expression of type 'string' to index a specific type

Currently, I'm attempting to transfer a custom hook used in Vue for handling i18n from JavaScript to TypeScript. However, I am encountering a persistent error message: An element is implicitly assigned the type 'any' due to an expression o ...

typescriptvue.js

Using Vue Formulate to effortlessly upload multiple images

One of my projects involves using a Vue Formulate component for uploading multiple images to an Express.js backend. Here is the code snippet for the Vue Formulate component: <FormulateInput type="image" name="property_ ...

javascriptvue.jsvue-formulate

The 'name' property of Axios and Vuex is not defined and cannot be read

When making a call to axios in my mounted function to retrieve profile data, I send the payload to the 'set_account' Vuex store upon success. To access this data, I utilize MapGetters (currentAccount) in computed properties. However, when tryin ...

javascriptvue.jsaxiosvuex

Setting the main color in Vue based on certain conditions

After developing a Vue app as a reusable library and setting the global $brand-color variable in the SCSS file to define the main color theme of the app, I encountered an issue when trying to integrate it for a new client who required a different brand col ...

vue.jssassvuejs2vue-component

How to toggle checkboxes in Vue.js

I received a JSON response that looks like this: {"roles":[{"id":1,"name":"Super Administrator","guard_name":"web","created_at":"2020-03-07T14:51:34.000000Z","updated_at":"2020-03-07T14:51:34.000000Z","permissions":[{"id":1,"name":"user create","guard_nam ...

vue.js

Issue with retrieving Vuex store in router.js using Async Await

I am encountering an issue while attempting to access the Vuex store in my router file. I am looking to define routes based on the data length stored in the Vuex state. Ideally, if the store's data is empty, I only require the Company List route to be ...

vue.jsasync-awaitvuex

What are the solutions for repairing direct links in vue router?

I have a Vue.js single-page application hosted on Azure that functions properly in production when starting from the homepage. However, I encounter a problem when trying to directly access links or refresh pages as it leads me to a 404 error page. I suspe ...

vue.jsvue-router