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

Exploring i18nNext integration with antd table in React

Error message: The login buttons from Meteor's accounts-ui-bootstrap-3 are not showing up on the webpage

Personalize Dropdown Menu, determining when to initiate the hide menu action

Two states each offering a distinct perspective

Collaborating with SockJS connectivity

Tips for setting up a queue system for alert messages in Vue.js with Vuetify

Tips for displaying a Bootstrap 5 popover triggered by a select option change event

Error displayed inline

Is it possible to forecast an on click event using jQuery?

Verifying user login on NodeJS through connection from an IIS-hosted website

Switch background color multiple times on click using JavaScript loop

The Vue route parameters are not recognized within the function type

Finding MongoDB data using an Express route and displaying it in a Jade template

"Encountering an error when trying to access undefined property in templates

Error in Node: JSON parse failure due to invalid token "'<'" and ""<!DOCTYPE ""

Uncovering the Mystery Behind the Repetitive Execution of useEffect in Next.js

Using a Button component as a TableCell in a material-ui Table

JavaScript API Response - conditional statement for handling a 'null' response

Elegant Bootstrap 4 Carousel featuring a glimpse of the upcoming slide alongside the primary carousel item

Exploring the process of extracting a nested JSON value using Postman