Starting my journey with VueJS, I encountered a roadblock when trying to incorporate components in routes for a router.
This is the component:
export default Home = {
template: `
<div class="top_container">
<div class="left_container">
<div class="title">
<h1>Current Settings</h1>
</div>
<div class="inner_container">
<p>URL: <span><?php if(isset($arrayInputs[0])) echo $arrayInputs[0]; ?></span></p>
<p>URL Refresh Interval: <span><?php if(isset($arrayInputs[1])) echo $arrayInputs[1]; ?></span>(s)</p>
<p>Brightness: <span><?php if(isset($arrayInputs[2])) echo $arrayInputs[2]; ?></span>(%)</p>
</div>
</div>
<div class="right_container">
<div class="title">
<h1>Change Settings</h1>
</div>
<div class="inner_container">
</div>
</div>
</div>
`,
};
The primary app setup looks like this:
import "https://cdn.jsdelivr.net/npm/vue/dist/vue.js";
import "https://unpkg.com/vue-router/dist/vue-router.js";
import "./components/Navbar.js";
import Home from "./components/Home.js";
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
// { path: '/dhcp', component: DHCP },
// { path: '/static', component: Static },
// { path: '/update', component: Update },
{ path: '*', component: NotFound }
]
})
new Vue({
el: '#app',
router: router,
})
Here is the HTML used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<script type="module" src="./src/App.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<Navbar></Navbar>
<section>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</section>
</div>
</body>
</html>
An error I am facing is:
Home.js:1 Uncaught ReferenceError: Home is not defined
In what way am I possibly misunderstanding?
I comprehend that I can generate an HTML element from a component using:
Vue.component("Home", { ... });
similarly how I did with <Navbar></Navbar>, but my requirement is to utilize them as components within routes and not merely as HTML tags.