Vue not displaying in Chrome - The div has been replaced by <!---->

I'm in the process of deploying a simple Vue application on Cloud Foundry. Below is the code for the single-page Vue application:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="static/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    </script>
  </body>
</html>

The vue.js file can be found at .

Upon trying to view the deployed application, I encountered the following issue: https://i.sstatic.net/K9T1m.png

Specifically in Chrome, I noticed that <div id="app"> was showing up as <!---->.

I conducted a test to verify if the vue.js file was being executed in Chrome, and it was. However, I'm puzzled by the differing behavior between production and local environments. The app functions correctly in both browsers when run locally.

Thank you!

Answer №1

The issue stemmed from a strict Content Security Policy implemented on the server, disallowing certain JavaScript syntax required by Vue, including new Function().

Upon further investigation, I discovered that transitioning my Vue project from Standalone (Runtime + Compiler) to Runtime only would resolve the problem. Runtime only projects are precompiled with a rendering function, making them compliant with CSP.

To switch my Vue project from Standalone to Runtime only (Vue v2.9.2), I made the following changes:

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      //'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }
}

In src/main.js, I transitioned from a template configuration:

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

To a render configuration:

new Vue({
  el: '#app',
  render: h => h(App)
})

By making this adjustment, I successfully converted my Vue project from Standalone to Runtime only since I did not have any components utilizing the template field.

Answer №2

This response really came through for me when I was struggling with a particular issue:

My problem was resolved by including an alias in the vue.config.js file:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

While there was a potentially better solution mentioned in the thread, I couldn't implement it as I'm using an inlined template :/

This alternative approach suggests using a render function instead of a template:

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  render: (h) => {
    return h(App)
  }
})

Many thanks!

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

Problems with Angular functionality

I'm a newbie when it comes to Angular and I'm eager to start practicing some coding. I've put together a simple app, but for some reason, the Angular expression isn't getting evaluated in the browser. When I try to display {{inventory.p ...

What is the process of specifying that an Angular directive must act as a child directive within a particular directive in Angular?

I am currently developing a directive for AngularJS. How can I specifically configure it to require being a child of directiveA? For instance, consider the following example: <my-modal> <m-header>Header</m-header> </my-modal> ...

Having trouble uploading Node.js and Mongoose to Heroku due to error codes H12 and H15? Need help troubleshooting and resolving this issue?

Attempting to deploy my Node, mongoose, express app on Heroku for the first time has been a challenge. The application is a simple blog with a login system. Despite extensive research and effort, I am struggling to successfully host it. Below is the error ...

GWT's Stylish Image Carousel

Can anyone recommend a simple image slider for GWT that meets the following requirements: Slides several images from right to left when user clicks on the image (selected image should be at the center) Has endless looping capability (the last image shoul ...

Issue with undefined object in ExpressJS PUT method

Attempting to utilize the PUT method for updating a record in my database, I encountered an issue with the object not being defined. ReferenceError: blogpost is not defined Following this tutorial for routing steps, I noticed that while the variable is d ...

Continuously transmitting PNG files to a server. I intend to instruct the receiving browser to automatically refresh at set intervals

I have a continuous task where my code is uploading a png to an http server every few seconds. I am looking for a way to implement some kind of marker that will trigger the browser to automatically refresh every 500ms, either through browser-side javascrip ...

Having trouble getting my Sequelize model to export properly

For my school project, I am developing an e-commerce website and encountering an issue with connecting my GoogleStrategy to my SQLite database. The goal is to store user data in a table, but whenever I try to call the variable in my passport-setup file, an ...

Issues with Javascript FadeToggle functionality not behaving as expected

When I click the reply button, the reply form opens. However, it has a problem where the code only works for the first element https://i.sstatic.net/Zoet4.png After that https://i.sstatic.net/Hotsq.png Button code <div class="reply-button bubble-orn ...

Managing errors with Node.js and handling https certificates

In short: I am developing a node application that sends requests using the secure version of HTTP, which is HTTPS. When I incorrectly configure my request options, I encounter the following error: Node.js Hostname/IP doesn't match certificate' ...

A guide to showcasing data within PrimeNG's pie chart component using either JavaScript or Angular

I have utilized the pie chart feature from the PRIMENG CHART PLUGIN My goal is to showcase the values within a pie chart Below, you can find my code for reference **Within app.component.html** <div style="display: block"> <p-chart type="pi ...

Exploring the connection between Jquery and Javascript event handling within ASP.NET C# code-behind, utilizing resources such as books and

It seems that Jquery, Javascript, and AJAX are gaining popularity now. I am interested in learning how to use this functionality within C#. Do you have any recommendations for resources or books that teach JavaScript from a C# perspective on the web? Not ...

Creating a custom AngularJS filter to search within an array of objects

I'm currently working with an object in my project: {"A":[],"B":[],"C":[],"D":[],"E":[],"F":[{"name":"Fargo","id":29}],"G":[],"H":[],"I":[],"J":[],"K":[],"L":[],"M":[],"N":[],"O":[],"P":[],"Q":[],"R":[],"S":[{"name":"Sullivan","id":23},{"name":"Sven" ...

The Gatsby plugin image is encountering an error due to a property that it cannot read, specifically 'startsWith

While browsing the site, I couldn't find a solution to my issue, but I stumbled upon an open bug on Github. The only workaround mentioned at the moment is to utilize GatsbyImage. As I delve into converting a Gatsby project from version 2 to 3, I have ...

Struggling with consolidating values in an array of objects - seeking assistance with Javascript

Currently, I am handling a project where I receive data in the form of an Object Array. My task is to merge values with the same key into one key and convert the values into an array of strings. Below is the sample data I am working with: inputArray = [ ...

Utilize the splice function when resizing the window based on specific breakpoints

On a series of div elements, I have implemented some JS/jQuery code that organizes them by wrapping every three elements in a container with the class .each-row. <div class="element"></div> <div class="element"></div> <div class ...

Is there a way to utilize JavaScript and AJAX to save a WordPress cookie and log in a user, all without the need for any plugins?

My goal is to log in to WordPress using only ajax requests. Here's the code I have so far: var username = data.username; var password = data.password; var wp_login_url = "http://local_Ip/api/user/generate_auth_cookie/?username=" +username + "&pas ...

Issue with AngularJS controller method not functioning properly when assigned to a Div

I am facing an issue with a login form and its controller. The login function is not triggering upon submitting the form for some reason. Here is the code snippet for the form within the larger view file: <div class="login-wrap" ng-controller="LoginCt ...

The React Component is not displaying any content on the webpage

I developed a Reactjs application using the create-react-app. However, I am facing an issue where the components are not displaying on the page. I suspect that App.js is failing to render the components properly. Take a look at my code: App.js import R ...

Tips on incorporating a color picker in HTML using jQuery

Looking to implement an HTML color picker with the help of JQuery. Wondering if there is a simpler method to do this without relying on external JQuery libraries? Experimented with <input type="color"> but encountered issues that prevented it from ...

The slash character is escaped by the RegExp constructor, but the dot character is

Consider the following code: console.log(new RegExp('.git')); console.log(new RegExp('scripts/npm')); which produces the following output: /.git/ /scripts\/npm/ The puzzling question here is - why does it escape the slash in &a ...