Encountering difficulties in JavaScript while trying to instantiate Vue Router

Question

Encountering difficulties in JavaScript while trying to instantiate Vue Router

After following the guide, I reached the point where creating a Vue instance was necessary (which seemed to work). However, it also required providing a Vue Router instance into the Vue constructor, as shown below.

const router = new VueRouter({ routes });
const app = new Vue({ router }).$mount('#app');

Unfortunately, this resulted in an error. Troubleshooting this issue has not yielded much information as encountered while google searching.

Uncaught ReferenceError: VueRouter is not defined(…)

I have verified that both packages are installed, along with some additional ones.

+-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdbbb8a88dffe3fde3f5">[email protected]</a>
+-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f7f4e4ace2ede8c1b3afb4afb0">[email protected]</a>
+-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c6a6979316e736968796e5c2e322c322f">[email protected]</a>

I have not implemented the importing for these two yet (uncertain about the placement in the code, and attempting with my index.js resulted in errors recognizing the token). However, I believe they may not be essential since Vue is recognized while only its router seems to cause issues. If importing is crucial, I assume both would fail if omitted.

import Vue from 'vue'
import VueRouter from 'vue-router'

The situation is further complicated because the decision was made to run it under Net.Core instead of NodeJs, which might pose limitations. We will not be using Webpack or Browserify to streamline the process (opting for plain dotnet run). Although this information may not be relevant at this stage, it's worth noting that what was supposed to be "so simple and easy" according to sources, appears more complex and cumbersome than anticipated. It seems straightforward in a specific environment but requires hands-on adjustments in my case.

What steps can I take to delve deeper into investigating this issue?

javascript routes vue.js .net-core vue-router

Answer 1

Answer №1

Here is a basic setup for vue-router. Remember to import Vue and vue-router so you can reference them in your code:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use( VueRouter );

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

Make sure your imports are set up correctly for this to work, as it has been reported to be challenging.

If you prefer not to use imports, you can link directly to the libraries in your HTML and remove the import lines, like so:

Vue.use( VueRouter );

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0573706028776a7071607745372b">[email protected]</a>"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

Answer 2

Here is a basic setup for vue-router. Remember to import Vue and vue-router so you can reference them in your code:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use( VueRouter );

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

Make sure your imports are set up correctly for this to work, as it has been reported to be challenging.

If you prefer not to use imports, you can link directly to the libraries in your HTML and remove the import lines, like so:

Vue.use( VueRouter );

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0573706028776a7071607745372b">[email protected]</a>"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

Encountering difficulties in JavaScript while trying to instantiate Vue Router

Answer №1

Similar questions

Regular expression that can be used to extract information from a text file by filtering and returning only

Ways to link two PHP scripts

Choose an input element from an iframe using jQuery

I am struggling to grasp the concept of ref unwrapping within a TypeScript template

Determining when a message has been ignored using php

A streamlined method for generating an array containing all numerical string values

Unable to find the solution for 'material-ui/Button'

When attempting to debug JavaScript in Edge with Visual Studio Code, an error message stating 'Failed to load source map for chrome-error...' was encountered

Tips for adding npm modules in StackBlitz?

Linking promises together ensures that they always resolve with a result

Displaying information in a table format

JavaScript: Employ array destructuring for improved code readability (eslintprefer-destructuring)

Submit simple text via XMLHttpRequest to an Express server

Exploring the Interaction Between Node.js and a Windows 10 Server on a Local Machine

Webpack 4 combines the power of Vue with the versatility of Typescript classes and JavaScript code simultaneously

React js code to create a position ranking table

Encountering cross-domain issues while integrating AngularJS in flex (web control), and trying to retrieve templates/json (local files)

Issue with Vue.js when attempting to access router property: "Cannot read properties of undefined (reading 'router')" error

Unable to successfully download npm packages - encountered an error running `[email protected] install: `node-pre-gyp install --fallback-to-build` on Ubuntu 18.04 system

Sorting or filtering with two elements in the option value in AngularJS