2

I have never done fullstack development of any sort and was pointed to this tutorial to do WedAPI and VueJS. I also have never used JS or anything outside of Python, PERL, and C# The tutorial is here: https://www.youtube.com/watch?v=qS833HGKPD8

I am at the time span between 31:00 and 37:55 where he begins the UI frontend part.

However I run into the error "UnCaught Reference Error: VueRouter is not Defined" when I reload the webpage and it points to my app.js file at line 8:

const router=new VueRouter({
    routes
})

Here are snippets of the code so far:

home.js:

const home={template: `<h1>This is Home page</h1>`}

department.js:

const department={template: `<h1>This is Departments page</h1>`}

employee.js:

const employee={template: `<h1>This is Employee page</h1>`}

app.js:

//root component to list the routing parts
const routes=[
    {path:'/home',component:home},
    {path:'/employee',component:employee},
    {path:'/department',component:department}
]

const router=new VueRouter({
    routes
})

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

variable.js:
//save API urls

const variables={
    API_URL: "http://localhost:15899/api",
    PHOTO_URL: "http://localhost:15899/photos/vari" 
}

index.html

<!DOCTYPE html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>

    <div id="app" class="container">
        <h3 class="d-flex justify-content-center">
            Vue JS Front End
        </h3>
        <h5 class="d-flex justify-content-center">
            Employee Management Portal
        </h5>

        <nav class="navbar navbar-expand-sm bg-light navbar-dark">
            <ul class="navbar-nav">
            <li class="nav-item m-1">
                <router-link class="btn btn-light btn-outline-primary"
                to="/home">Home</router-link>
            </li>
            <li class="nav-item m-1">
                <router-link class="btn btn-light btn-outline-primary"
                to="/department">Department</router-link>
            </li>
            <li class="nav-item m-1">
                <router-link class="btn btn-light btn-outline-primary"
                to="/employee">Employee</router-link>
            </li>
            </ul>
        </nav>
        <router-view></router-view>
    </div>

    <script src="variables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="home.js"></script>
    <script src="department.js">
    </script>
    <script src="employee.js"></script>
    <script src="app.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

On the tutorial with only this code, the instructor has no issues.

What am I doing wrong to get this message? I looked for solutions but the directions are all over the place. I even tried

npm install --save vue-router

but got this:

npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmjs.org/@vue%2fdevtools-api failed, reason: getaddrinfo ENOTFOUND proxy-chain.intel.com
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:

I have configured my work computer's proxy but no joy. The instructor didn't need to install vue router. It seemed he just linked it in his index.html which is what I did.

I've done everything that is stated in the tutorial.

Bilal
  • 3,191
  • 4
  • 21
  • 49
devn00b1090
  • 97
  • 1
  • 8

2 Answers2

4

In case anyone runs into this tutorial I fixed it like so:

So the tutorial uses the HTML method instead of package install method aluded above in Siti's answer. However since the tutorial was made, Vue has updated it's URLs and how to launch the Vue Router/use the Vue router in HTML mode and this can be found here: https://router.vuejs.org/guide/

My app.js looks like this now:

    //root component to list the routing parts
    const routes=[
        {path:'/home',component:home},
        {path:'/employee',component:employee},
        {path:'/department',component:department}
    ]
    
    const router = VueRouter.createRouter({
        // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
        history: VueRouter.createWebHashHistory(),
        routes, // short for `routes: routes`
      })
    
    // const app = new Vue({
    //     router
    // }).$mount('#app')
    
    // 5. Create and mount the root instance.
    const app = Vue.createApp({})
    // Make sure to _use_ the router instance to make the
    // whole app router-aware.
    app.use(router)
    
    app.mount('#app')

And ny HTMl document now looks like this:

    <!DOCTYPE html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    </head>
    <body>
    
        <div id="app" class="container">
            <h3 class="d-flex justify-content-center">
                Vue JS Front End
            </h3>
            <h5 class="d-flex justify-content-center">
                Employee Management Portal
            </h5>
    
            <nav class="navbar navbar-expand-sm bg-light navbar-dark">
                <ul class="navbar-nav">
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/home">Home</router-link>
                </li>
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/department">Department</router-link>
                </li>
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/employee">Employee</router-link>
                </li>
                </ul>
            </nav>
            <router-view></router-view>
        </div>
    
        <script src="variables.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script src="https://unpkg.com/vue@3"></script>
        <script src="https://unpkg.com/vue-router@4"></script>
        <script src="home.js"></script>
        <script src="department.js">
        </script>
        <script src="employee.js"></script>
        <script src="app.js"></script>
    
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    </body>
</html>

Note the updated URL http/s links and the new method to invoke the vue router.

I am new to Vue js so I wasn't aware of this till my work buddy pointed this out. This issue is resolved for now

Bilal
  • 3,191
  • 4
  • 21
  • 49
devn00b1090
  • 97
  • 1
  • 8
0

First install vue-router using

npm install --save vue-router

Then only you can use it

import VueRouter from 'vue-router';

Vue.use(VueRouter)

const routes = [ {path: '/', component: SomeComponent} ]

Siti Aisah
  • 303
  • 1
  • 7
  • I have tried that but it won't install. I am trying to do this on a work laptop with proxies. I have edited proxies as directed by boss but I get : npm ERR! code ENOTFOUND npm ERR! syscall getaddrinfo npm ERR! errno ENOTFOUND npm ERR! network request to https://registry.npmjs.org/@vue%2fdevtools-api failed, reason: getaddrinfo ENOTFOUND proxy-chain.intel.com npm ERR! network This is a problem related to network connectivity. – devn00b1090 Feb 24 '22 at 05:20
  • @devn00b1090 try running this command npm config set proxy npm config set registry "http://registry.npmjs.org/" from this thread https://stackoverflow.com/questions/25826839/node-npm-install-failure-due-to-proxy-config-what-now – Siti Aisah Feb 24 '22 at 06:08