Setting up a navigation path using Vue Router

I'm facing some challenges creating a router using Vue.js. My main.js file was functioning well with the code below, but when I added some routes, I ran into the following error:

MAIN.JS BEFORE (WORKING WELL)

import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
    
import VueRouter from 'vue-router'
import store from './store'
    
createApp(App).use(store).use(router).mount('#app')

MAIN.JS AFTER

import 'bootstrap/dist/css/bootstrap.css'
import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
import store from './store'

import testeRouter from './pages/testeRouter'

Vue.use(VueRouter)

const router = new VueRouter({
    routers: [
        {
            path: '/pages/testeRouter',
            component: testeRouter
        }
    ]
})

Vue.createApp(App).use(store).use(router).mount('#app')

ERROR

TypeError: Cannot read properties of undefined (reading 'use')

The pages aren't rendering anymore and I've been struggling to fix it. Any ideas on what might be causing this issue? Thanks!

{
  "name": "routing-software",
  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "routing-software",
      "version": "0.1.0",
      "dependencies": {
        "axios": "^0.27.2",
        "bootstrap": "^5.2.1",
        "bootstrap-vue": "^2.22.0",
        "core-js": "^3.8.3",
        "router": "^1.3.7",
        "vue": "^3.2.40",
        "vue-axios": "^3.4.1",
        "vue-router": "^4.0.3",
        "vuex": "^4.0.0"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-plugin-router": "~5.0.0",
        "@vue/cli-plugin-vuex": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3"
      }
},
javascriptvue.js

Answer №1

Vue 3 doesn't provide direct access to the use method, which is causing the issue.

Vue.use(VueRouter) // this line is causing the problem

You can try it this way

import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

import store from './store'

import testeRouter from './pages/testeRouter'

const router = VueRouter.createRouter({
    routers: [
        {
            path: '/pages/testeRouter',
            component: testeRouter
        }
    ]
})

createApp(App).use(store).use(router).mount('#app')

For Vue 3 route handling, refer to this link, and for information on breaking changes, check this page.

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

What is the best way to manage errors and responses before passing them on to the subscriber when using rxjs lastValueFrom with the pipe operator and take(1

I'm seeking advice on the following code snippet: async getItemById(idParam: string): Promise<any> { return await lastValueFrom<any>(this.http.get('http://localhost:3000/api/item?id=' + idParam).pipe(take(1))) } What is the ...

javascriptangularrxjs

Generating CSV File using PHP, AJAX, and MySQL

Currently facing an issue: I am in the process of updating a functional system, which requires me to write code that seamlessly integrates. My goal is to generate a csv file on a php page and store it in a mysql database. Additionally, I am utilizing Ajax ...

javascriptphpjquerymysqlajax

Modal visibility glitch: Bootstrap concealing one modal while erroneously revealing another

Upon loading, a button named .giveawayApplyNow is present in a modal. When clicked, the following code is triggered: $('.giveawayApplyNow').click(function() { $('#GiveawayModal').modal('hide'); $('#GiveawayModal&a ...

javascriptjquerybootstrap-4bootstrap-modal

What is the best way to retrieve an ng-model parameter within a controller?

I'm working on implementing a PUT method in my controller and need to bind the new value back to it. I've tried: <div ng-app="myApp" ng-controller="personCtrl"> <form> First Name: <input type="text" ng-mod ...

javascriptangularjsionic-framework

The animation speed of the jQuery hashchange event is set to zero, causing the animation

I'm facing an issue with jQuery where my animation inside a hashchange event is not smooth; it happens instantly when triggered. I'm looking for a way to make the animation smoother. jQuery( document ).ready(function() { jQuery(window).on(&a ...

javascriptjqueryjquery-animatehashchange

Is it common practice to provide a callback function as a parameter for an asynchronous function and then wrap it again?

app.js import test from "./asyncTest"; test().then((result)=>{ //handle my result }); asyncTest.js const test = async cb => { let data = await otherPromise(); let debounce = _.debounce(() => { fetch("https://jsonplaceholde ...

javascriptnode.jsasynchronouspromiseasync-await

How to implement and utilize a history-object interface in React with Typescript?

Can you help me with setting up an interface for a history object in my component? Currently, it is typed as any and I want to type it appropriately. Object: https://i.sstatic.net/Sru8R.png Here's the code snippet: import React, { useState } from &a ...

javascriptreactjstypescript

Invoke the API and display the data once the states have been successfully updated

Upon initialization, the code checks the current role of the user. If the role is admin, the setAdmin(true) function is called to set the state of admin to true. By default, the admin state is set to false. When the component is rendered, it initially di ...

javascriptreactjs

Error encountered at / - undefined local variable or method `parameters' for main:Object (Executing Stripe Charge with Stripe.js)

Encountering an error with the code below while attempting to create a Stripe charge using Stripe.js. Below is my web.rb file: require 'json' require 'sinatra' require 'sinatra/reloader' require 'stripe' get &a ...

javascriptrubystripe-payments

Unable to modify the entity

My goal is to make modifications to an entity with a specific mapping: @Entity @Table(name = "obs_structure2") @JsonIdentityInfo(generator = ObjectIdGenerators.PropertyGenerator.class, property = "id") public class Structure implements Serializable{ p ...

spring-bootvue.js

What is the process for retrieving paginated data from the store or fetching new data from an API service within an Angular 2 application using ngrx-effects?

After coming across this insightful question and answer about the structure of paginated data in a redux store, I found myself pondering how to implement similar principles using ngrx/store in an angular 2 application. { entities: { users: { 1 ...

javascriptangularreduxngrxngrx-effects

Implementing a password prompt in CodeIgniter using JavaScript

I need to delete a teacher as an admin, but before doing so, I want to require them to re-enter their password. However, I'm having trouble getting the delete function to work even though the prompt is displayed. Can someone help me figure out what I& ...

javascriptphpjquerycsscodeigniter

check if JSON value is not null

Display items in ng-repeat only when the value of a certain key is not empty. Here is the code snippet: <a class="item" href="#" ng-repeat="e in events | orderBy:'match_time'" ng-if="e.match_timer !== NaN && e.match_status !== ' ...

javascriptangularjs

What are some common applications of the QMap datatype in QML?

Let's say I have a simple QMap declared and initialized with values inside C++ and properly exposed to QML. C++ QMap<QString, QMap<QString, QString>> airflow_buttons_; //simple getter [[nodiscard]] QMap<QString, QMap<QString, QStr ...

javascriptc++qtqml

Transforming javascript's array.map into php's array_map function

The following code snippet is written in JavaScript and consists of a hashmap array with keys and values. I have created a function using map that returns the values of the entered keys. var rule = { "c": "d", "a": "o", "t": "g", "h": "a", "e": "n", "n": ...

javascriptphparrays

Leverage JavaScript to retrieve the formatting of an element from an external CSS stylesheet

Check out this HTML snippet: <html> <head> <link rel="stylesheet" type="text/css" media="all" href="style.css"> </head> <body> <div id="test">Testing</div> <script> ...

javascripthtmlcss

Creation of Date object

Trying to create a new Date object with the constructor new Date(24, 2, 1, 0, 0 ,0) is causing an issue where it defaults to using setYear instead of setFullYear, resulting in the year being set as 1924. While this may work in most cases, I need the abilit ...

javascriptdate

Express JS redirect does not update the URL and fails to load static files

I'm currently developing an application using Express.js to build the REST interface on Node.js. Additionally, I am using jQuery Mobile for the client-side pages. One issue I am facing is with redirects when users try to access a restricted or inacce ...

javascriptjquerynode.jsjquery-mobileexpress

Leverage the worker-loader in conjunction with vue-cli and webpack

Currently, I am in the process of setting up worker-loader with vue-cli webpack installation. The file structure for build / configuration looks like this: -build --vue-loader.conf.js --webpack.base.conf.js --other build files... -config --index.js --dev. ...

vue.jsbabeljsweb-worker

The onclick function in the Navbar div fails to work for inner elements

Within my navbar, there is a .dropbtn div that I want to trigger a dropdown function when clicked. However, only the text "TOTAL" seems to activate this function onclick. The <span> and <i> elements inside the .dropbtn do not respond to clicks ...

javascriptjqueryhtmlcss