Facing a completely empty page after upgrading to vuejs 2.0

For me, upgrading my application to 2.0 has proven to be quite a challenge and I've spent hours trying to figure it out. In the past, I used vuejs within my application for certain functionalities, without treating it as a standalone vuejs application.

Initially, I initialized vuejs on the body element and everything was working fine with vuejs 1. Now, however, when I try to wrap it in a div and call it like this:

const app = new Vue({
    el: '#app',
});

My HTML structure looks like this:

<html>
  <body>
    <div id="app">
        <div class="app-wrapper">
            <h1>My stuff</h1>
       </div>
    </div>
  </body>
</html>

I understand that this setup overwrites the content within my div, but how can I apply it to an already rendered page? Is there a way to reload the rendered page into that div again?

Any help would be greatly appreciated. Thank you!

Answer №1

Thank you all for your assistance.

In the end, I discovered that the root cause of the issue was my usage of Webpack, requiring me to make adjustments to the webpack configuration file.

//webpack.config.js

module.exports = {
  entry: {...},
  output: {...},
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    },
  },
  ...
};

Last updated on 02/06/2020

Referenced from dist/README.md in VueJS repository

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

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

Material-UI organizes its Grid Items vertically, creating a column layout rather than a horizontal row

I'm struggling to create a grid with 3 items in each row, but my current grid layout only displays one item per row. Each grid item also contains an image. How can I modify the code to achieve a grid with 3 items in a row? Here's the code snippet ...

Tips for exchanging JavaScript variables with PHP using AJAX

Hey there, I'm new to JavaScript and I've hit a roadblock with passing variables to PHP using Ajax. <script> $date = "123"; $.ajax({ url: './record.php', type: "POST", ...

I'm seeking assistance with a frontend script problem. I'm curious if there are alternative approaches to coding this script that may be more effective. Can anyone offer guidance on this?

As a frontend developer specializing in script injection, I have been utilizing Adobe Target to inject scripts. However, this method presents several challenges: 1. It is difficult to debug code errors as my HTML and CSS are wrapped inside ' ' a ...

You are unable to insert a variable within the channels.get() method in discord.js

Attempting to troubleshoot this issue has been quite frustrating. Despite my efforts, it seems that something is not working as expected. I can't help but wonder if I am simply overlooking a simple mistake due to fatigue. Here's the scenario: It ...

Enhancing Promises.all with extra parameters

Looking to dive into promises, eager to learn. Here is an array of shopIds I'm working with: let shopIdsArray = ['shop1','shop2','shop3']; Additionally, there's an external promise call: getProducts(shopId, ' ...

What is the best way to utilize the .done() callback in order to execute a function when new data is loaded upon request?

I have a web page that pulls data from a JSON feed, and there's also a button to load more content from the feed when clicked. I want to add additional elements inside the page for each item in the feed. I've managed to create a function that doe ...

The search feature in AngularJS with filter appears to be malfunctioning

I've been attempting to use the angularjs filter method for searching, but it doesn't seem to be working correctly. Despite not seeing any errors in the console, the search results aren't showing up. Can someone lend a hand with this? Below ...

Embed the json data within the modal box

I received a JSON response from a php function, and it looks like this: [{"id":"15","activity_type":"call","activity_title":"Call to check "}] Below is the script that triggers the request (actvitiy.js) (Edited) $(document).on("click", ".view_contact_ac ...

Unable to make changes to the AWS Dynamo array

I am currently attempting to update a JSON array. I have a table in DynamoDB where I successfully inserted the JSON data using the PUT method. Partition key : _id , Type : S Below is the JSON data that has been saved into the database: { "_id": ...

The attempt to generate a .zip file using Node.js with Egg framework was unsuccessful

I developed a Node.js service using Egg framework to send a local .zip file (compressed directory) to the browser, but encountered an issue. Below is the code snippet: Egg.js // Code for zipping files async download() { const ctx = this.ctx; co ...

Experiencing a problem with value formatting while attempting to implement tremor for charts in React with Next.js version 13

import { getAuthSession } from "@/lib/auth"; import { db } from "@/lib/db"; import { Card, LineChart, Text, Title } from "@tremor/react"; import Linechart from "./LineChart"; const dollarFormatter = (value: number) ...

Rendering elements in a sequential manner using VueJS

Currently, I am in the process of learning vue and creating a ranking component. In order for it to function correctly, I need to showcase the elements individually, similar to the following example: <input type="text"> <label for=" ...

Exploring the capabilities of SVG and audio integration in web browsers

I am curious if it's possible to incorporate audio into an SVG file in a web browser. I came across this thread here, but unfortunately, I can't leave a comment =/ I tried implementing the code from this website, but it doesn't seem to work ...

Exploring the use of single character alternation in regex with Webstorm's Javascript Regex functionality

I've been attempting to divide the string using two different separators, like so: "some-str_to_split".split(/-|_/) It successfully splits the string based on both "-" and "_". However, Webstorm is issuing a warning: Single character alternation ...

Tips for recognizing hyperlinks within a block of text and converting them to clickable links in Angular 2

My task is to create clickable links within a paragraph of strings. I tried using a custom pipe, but seem to be missing something essential. Here's my attempt: import { Pipe, PipeTransform } from '@angular/core'; import { DecimalPipe ...

Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

I'm currently working on a project to develop a photo gallery. let img = document.createElement('img') img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg% ...

What methods can I use to prevent caching of XMLHttpRequest requests without relying on jQuery?

I am currently working on a web application that refreshes a table every minute from an XML file. However, I have noticed that when I make edits to the content of the XML file, I see a "304 Not Modified" message in the script log when trying to retrieve th ...

What is the best way to deploy a REST API utilizing an imported array of JavaScript objects?

I have been using the instructions from this helpful article to deploy a Node REST API on AWS, but I've encountered a problem. In my serverless.yml file, I have set up the configuration for the AWS REST API and DynamoDB table. plugins: - serverless ...

Showing information from a database while incorporating line breaks with the help of nl2br

Having trouble with the previous question, so I'll provide more detail here. Below is my index.php file where I explain the method used to save data to a database. <html> <head> <script> function updategroup() { var update_c ...

Gain access to JSON information and store it in the datasource variable using the Kendo datasource function

Within my asp.net project, I have utilized the following approach to extract Json data from a js file: var ds = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:2544/JS/emp ...