CODEWITHSUNDEEP
laravelvue.js
MD Sarfaraj
MD Sarfaraj

Reputation: 137

Changes are not showing in the website Vue Js?

<!-- Service Policy Modal -->
<!-- <div class="modal modal-landing fade" id="servicePolicyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-body justify-content-center">
        <h4 class="modal-title text-center mb-4" id="exampleModalLabel">
          {{ trans('lang.service_policy') }}
        </h4>
        <img :src="publicPath+'/images/service-policy.png'" class="img-fluid mx-auto d-block mb-4" width="50%" alt="">
        <div class="text-justify mb-4" v-html="custom_content"/>
          <div class="row justify-content-center">
            <div class="col-4">
              <button type="button" class="btn btn-block btn-landing" data-dismiss="modal">
                {{ trans('lang.close_btn') }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> -->

I commented down this code in Vue JS, Laravel application but the problem is the section is still showing on the website. The changes are not reflected on the website. Can you please help me out with this?

Upvotes: 1

Views: 7699

Answers (2)

Annity
Annity

Reputation: 126

Simply making changes to the Vue files won't actually affect anything on the site, because the actual code that is rendered is in the public folder (most probably the public/app.js file). In order to compile the Vue files to the public folder, you need to run a command after making the changes. npm run dev or npm run prod are used for this. You could also run npm run watch to continuously watch for changes and automatically compile the assets instead of running a command manually each time you make a change.

You should see that each time you make a change and run one of those commands, the change appears also in a file in the public folder of the project. Do not edit the files inside the public folder directly, since if those commands are run /they are likely to be a part of the deploy procedure/, those changes will be overwritten by the newly compiled files from the source ones (those in resources folder).

Upvotes: 2

Luciano
Luciano

Reputation: 2196

I could bet that it's related to page chache. Open the Chrome de tools, under Network tab check "disable cache" and try again. Vue js precompiles the js code by chunking vendor files in small js files such as 1.js, 2.js, etc, which are loaded on demand while you navigate your app.

Your new change may be located in 1.js, so no matter the code change, if this file is loaded from cache and not from Network, you won't see the updates until cache refresh.

Upvotes: 0

Related Questions