Transition from Vue2 to Vue3: Embrace the evolution

Could someone assist me in converting this vue wrapper to be compatible with Vue3? I have attempted it myself, but the components that I try to render using my buildApp method are not appearing. Is there an alternative for the Vue object imported from vue in vue3?

import Vue from 'vue';
import HttpServiceFactory from '@/api/HttpServiceFactory';
import { TranslationHelper } from '@/utils/mixins/Translations';
import { PermissionsHelper } from '@/utils/mixins/Permissions';
import HttpClient from '@/utils/http/HttpService';
import ApplicationConfig from '@/config/ApplicationConfig';
import ParentAccessorHelper from '@/src/helpers/plugins/ParentAccessorHelper';
import VueRouter from 'vue-router';
import * as UtilityComponents from './utils/import';

Object.entries(UtilityComponents).forEach(([componentName, componentExport]) => {
    Vue.component(componentName, componentExport);
});

Vue.buildApp = ({ layoutId, routes = null, rootData = {} }) => {
    Vue.use(VueRouter);

    if (routes === null) {
        return new Vue({
            data() {
                return {
                    ...rootData,
                };
            },
        }).$mount(`#${layoutId}`);
    }

    const router = createRouter({
        history: createWebHistory(),
        routes,
    });

    const app = createApp({
        data() {
            return {
                isAppLoading: true,
                ...rootData,
            };
        },
    }).use(router).mount(`#${layoutId}`);

    router.beforeEach((to, from, next) => {
        app.isAppLoading = true;
        next();
    });

    router.afterEach(() => {
        app.isAppLoading = false;
    });

    return app;
};

export default Vue;

Answer №1

Vue3 introduced the createApp function for creating a vue instance.

I hope this information proves useful.

const app = createApp({});

Object.entries(ExtraComponents).forEach(([compName, compExport]) => {
    app.component(compName, compExport); 
});

app.config.globalProperties.$initializeApp = () => {  
 // perform necessary actions...
}

export default app;

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

Organize information according to the size of the window

I am in need of reorganizing some content based on the size of the window or screen. This is how it appears in full view: https://i.sstatic.net/EInnS.png But here's what I want when the screen size is 768 pixels or less: https://i.sstatic.net/N1ky0 ...

NodeJS - Retrieving files from Google Drive

Here is a code snippet that I'm using to download files from Google Drive: function downloadDrive(fileId, callback) { var fileExt = fileId.split("."); var file = Date.now() + "." + fileExt[fileExt.length - 1]; var dest = fs.createWriteStream(". ...

Having difficulty implementing dynamic contentEditable for inline editing in Angular 2+

Here I am facing an issue. Below is my JSON data: data = [{ 'id':1,'name': 'mr.x', },{ 'id':2,'name': 'mr.y', },{ 'id':3,'name': 'mr.z', },{ & ...

Exploring Vue 3.1+ and its Delimiters: Common Problems for Beginners

Hi there, I could use a little assistance. I'm just getting started with Vue and I'm having trouble changing the delimiters to get them working properly. Would someone be willing to review this code snippet and let me know if it looks like it sho ...

Construct a structure containing the key/value pairs of cells within an HTML table row using JavaScript

I'm completely new to JavaScript so please be patient with me; I'm not even sure if I'm searching for the solution correctly. Despite spending hours googling and experimenting, I still can't get it to work. My issue is related to an HT ...

Slerping with quaternions in Three.js can produce undesirable outcomes when near the poles

Check out this video example: https://drive.google.com/file/d/18Ep4i1JMs7QvW9m-3U4oyQ4sM0CfIFzP/view In the demonstration, I showcase how I determine the world position of a ray hitting a globe under the mouse cursor. By utilizing lookAt() with a THREE.Gr ...

Unable to conceal the scrollbar while keeping the div scrollable

I've been attempting to implement the techniques outlined in the guides on this site, but I'm encountering difficulty hiding the scroll bar while still maintaining scrolling functionality! My current approach involves setting the parent as relat ...

Preventing variables from reinitializing in express.js

Within my app.js file, I invoke a search function that communicates with an LDAP server. Upon doing so, the server sends back a cookie which is essential for my subsequent queries. My intention was to save this cookie as an app.local variable in my app.j ...

The error message "Trying to access an undefined object when trying to navigate using 'this.props.navigation.navigate' in the _onViewApp function at line 17

I've come across this question in several places, but I'm still struggling to find a solution despite the advice given. The majority of the code I have implemented so far is based on the following article - https://medium.com/@austinhale/buildin ...

Issues with setting up gulp and implementing pdf.js

Currently, I am trying to integrate pdf.js library from this source. After downloading and extracting the library, I attempted to install gulp globally as per the instructions on the page. However, when I ran the command: C:\Users\xx\Deskto ...

Achieving functionality with dropdown menus in jQuery

I am facing an issue with a dropdown menu that works perfectly in jsFiddle during testing, but does not function as expected when I run it on my testing server. jsFiddle: http://jsfiddle.net/cyberjo50/39bu8/2/ HTML <!doctype html> <html> < ...

Determine whether the browser tab is currently active or if the user has switched to a different

Is there a way to detect when a user switches to another browser tab? This is what I currently have implemented: $(window).on("blur focus", function (e) { var prevType = $(this).data("prevType"); if (prevType != e.type) { // handle double fir ...

What is the method to display the Vue.js component's identifier?

Here is a link to an official document: https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Component Below is a demonstration of a simple todo list: Vue.component('todo-item', { template: '\ <li>\ {{ titl ...

Having trouble loading CSS in an express view with a router

I am encountering an issue where I am unable to load my CSS into a view that is being rendered from a Router. The CSS loads perfectly fine for a view rendered from app.js at the root of the project directory. Below is my current directory structure, node_ ...

Discover the method to retrieve the chosen value from a list of radio buttons using AngularJS

After making an AJAX request and receiving JSON data, I have created a list of radio buttons with values from the response. Although I have successfully bound the values to the list, I am facing difficulty in retrieving the selected value. Below is a snipp ...

Tips for attaching a "progress" and refresh event to an ajax call while sending a file

I am currently using the FormData API and AJAX to upload files to a server in PHP-CodeIgniter. The file upload works perfectly when triggered by the file select event. However, I would like to display a progress bar next to each file being uploaded with th ...

In Javascript, ensuring a stopping condition for a recursive function that is looping through JSON data

I am having trouble figuring out how to set the break condition for this recursive function. Currently, the function is causing the browser to freeze (seems to be stuck in an endless loop). My goal is to create a series of nested unordered lists based on ...

Utilizing jQuery to fetch the source value of an image when the closest radio button is selected

On my website, I have a collection of divs that display color swatches in thumbnail size images. What I want to achieve is updating the main product image when a user clicks on a radio button by fetching the source value of the image inside the label eleme ...

Tips for ensuring a button stays anchored to the bottom of a flatlist while scrolling to the end in React Native

const Layout = () => { return ( <View style={styles.container}> <Text style={styles.heading}>Screen Data</Text> <View> <FlatList data={data} renderItem={({item}) => ( ...

What is the best method to reset values in ngx-bootstrap date picker?

At the moment, it is only accepting the most recently selected values. To see a live demo, click here. ...