Vue 3 components not importing other vue components - javascript

My Vue component navbar.vue does not import other components.
This is Vue 3 with the Option API.
All of the components are imported by index.js in the component folder
import navbar from '#/components/navbar.vue'
import btn from '#/components/btn.vue'
export {
navbar,
btn
}
This is the navbar.vue:
<template>
<header class="navbar">
<ul>
<li>
<router-link to="/">Home</router-link>
</li>
<li>
<btn></btn>
</li>
</ul>
</header>
</template>
<script>
import { btn } from '#/components'
export default {
name: 'navbar',
components: {
btn
}
}
</script>
This is the btn.vue components:
<template>
<button class="btn" #click="$emit('click')">
<slot/>
</button>
</template>
<script>
export default {
name: 'btn'
}
</script>

Your index.js exported navbar and btn. And also you have already exported another component from navbar.vue in same file level. So make a separate folder for navbar and btn or change the export name.
I am new to frameworks. Hope this will work.

Related

VueJS 3 - <router-link-active> class not applied to routes that start with the same path name

I have created a simple navar where I have 3 links. All links are declared at a ROOT level of the router object. I've added a simple styling targeting the <router-link-active> class where the active link is highlighted on the navbar. This all works fine, switching between links updates the URL, changes the <router-view> as well as applies correct style to the navbar link currently on.
The issue I'm having is that whenever I click on a 4th link which is also declared on the ROOT level of the router object, starting with the same path name as currently active link, the <router-link-active> class disasters. e.g.
{ path: "/link2", component: link2 },
{ path: "/link2/sibling", component: sibling },
My understanding is because the /links2/sibling starts with the same name as /link2, the navbar item that navigates to /link2 should still be have the <router-link-active> class, even when the /link2/sibling is currently active URL.
Codesandbox
App.vue
<template>
<div>
<ul class="flex gap-x-5">
<router-link to="/">
<li>Link 1</li>
</router-link>
<router-link to="/link2">
<li>Link 2</li>
</router-link>
<router-link to="/link3">
<li>Link 3</li>
</router-link>
</ul>
</div>
<router-view />
</template>
<script>
export default {
name: "App",
};
</script>
<style>
a:hover,
a:active,
a.router-link-active {
color: #f1a80a;
border-color: #f1a80a;
background-color: #1a037e;
}
</style>
main.js
import App from "./App.vue";
import router from "./router.js";
const app = createApp(App);
app.use(router);
app.mount("#app");
router.js
import { createRouter, createWebHistory } from "vue-router";
import link1 from "./components/link1.vue";
import link2 from "./components/link2.vue";
import sibling from "./components/sibling.vue";
import link3 from "./components/link3.vue";
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: "/", component: link1 },
{ path: "/link2", component: link2 },
{ path: "/link2/sibling", component: sibling },
{ path: "/link3", component: link3 }
]
});
export default router;
link1.vue
<template>
<div>You are inside Link1</div>
</template>
link2.vue
<template>
<div>
<router-link to="/link2/sibling">
You are inside Link 2 (CLICK ME)
</router-link>
</div>
</template>
link3.vue
<template>
<div>You are inside Link 3</div>
</template>
sibling.vue
<template>
<div>You are inside Link2 sibling</div>
</template>
I think that is the natural behavior that we could expect from routing. when you click on You are inside Link 2 (CLICK ME) inside link2.vue component, the vue-router loads sibling.vue in the router-view part in your App.vue. So there is no You are inside Link 2 (CLICK ME) link in that view to see the router-link-active styles. If you want to see that styles, you must keep your link in the view and don't allow vue-router to disappear that.
For achieving such a goal you can use Nested Routes in vue-router like this. First change your router.js file to something like this:
import { createRouter, createWebHistory } from "vue-router";
import link1 from "./components/link1.vue";
import link2 from "./components/link2.vue";
import sibling from "./components/sibling.vue";
import link3 from "./components/link3.vue";
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: "/", component: link1 },
{
path: "/link2",
component: link2,
children: [
{
path: 'sibling',
component: sibling
},
]
},
// { path: "/link2/sibling", component: sibling
//
// },
{ path: "/link3", component: link3 }
]
});
export default router;
And then add a <router-view> to your link2.vue file like this:
<template>
<div>
<router-link to="/link2/sibling">
You are inside Link 2 (CLICK ME)
</router-link>
<router-view></router-view>
</div>
</template>

What causes the duplicated key error in this Vue.js application?

I am working on a small Todo App with Vue 3.
In App.vue I have the 3 child components and the methods:
<template>
<div id="app">
<Header/>
<List/>
<Footer/>
</div>
</template>
<script>
import axios from 'axios'
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header,
List,
Footer
},
props: ['todos'],
data() {
return {
url: "https://jsonplaceholder.typicode.com/todos?&_limit=5",
dataIsLoaded: false,
isValidInput: true,
todos: [],
unsolvedTodos: [],
newTitle: "",
}
}
}
</script>
In List.vue I have:
<template>
<div>
<h1>List</h1>
<ul class="todo-list" v-if="dataIsLoaded">
<TodoItem v-for="todo in todos.slice().reverse()" :key="todo.id" v-bind:class="{done: todo.completed}" :todo="todo" />
</ul>
</div>
</template>
<script>
import TodoItem from "./TodoItem.vue";
export default {
name: 'List',
components: { TodoItem },
props: ['todos']
}
</script>
In TodoItem.vue:
<template>
<li>
<input type="checkbox" :checked="todo.completed" #change="toggleTodo(todo)" />
<span class="title">{{todo.title}}</span>
<button #click="deleteTodo(todo.id)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</li>
</template>
<script>
export default {
name: 'TodoItem',
props: ['todo']
}
</script>
The todo list's <h1> heading is displayed, but the unordered list of todos is not.
Introducing props: ['todos'] in App.vue throws the error Duplicated key 'todos'.
What am I missing?
On your App.vue you defined props['todos'] and at the same time todos is defined in your data(). That might be the one causing the error.
Looks like you forgot to define dataIsLoaded in List.vue. It either needs to be defined in data or be a computed property.

Vue.js 3- Component doesn't load in VueJS with router

When I click in a router-link to go to register-form page, the URL changes, but the component doesn´t load.
I have the navbar in a component, and I thought that it was wrong, but no...
Here's the router's file code:
import {createRouter, createWebHashHistory} from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
},
{
path: '/formulario-registro',
name: 'RegisterForm',
component: () => import(/*webpackChunkName: "registerform"*/ '../views/RegisterForm.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router
And here's my nav componet, where there are the router-link:
<div class="nav">
<div class="brand">
<router-link to="/">BookArt</router-link>
</div>
<div class="collapse">
<span id="mobile-icon" v-on:click="responsiveNavbar"></span>
</div>
<div class="links">
<ul id="nav-list-group">
<li class="list-item">
<router-link to="/"> Inicio</router-link>
</li>
<li class="list-item">
<router-link to="/formulario-registro"> Registro</router-link>
</li>
<li class="list-item">
<router-link to=""> Login</router-link>
</li>
</ul>
</div>
My main.js code:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
And my App.vue code:
<template>
<Nav></Nav>
<router-view/>
</template>
<script>
import Nav from '#/components/Nav.vue'
export default {
components: {
Nav
}
}
</script>
Here's my register-form component's code:
<template>
<form action="">
<div class="form-group">
<input type="text" name="form.username" id="form.username" class="username" placeholder="Nombre de usuario....">
</div>
<div class="form-group">
<input type="file" name="form.profile_pic" id="form.profile_pic" class="profile_pic"
placeholder="Foto de perfil....">
</div>
<div class="form-group">
<input type="email" name="form.email" id="form.email" class="email" placeholder="Email....">
</div>
<div class="form-group">
<input type="password" name="form.password" id="form.password" class="password" placeholder="*******">
</div>
<div class="form-group">
<input type="password" name="form.confirm_password" id="form.confirm.password" class="confirm_password"
placeholder="*******">
</div>
<div class="form-group">
<button>Registrarse</button>
</div>
</form>
</template>
<script>
export default {
name: "Register-form",
mounted() {
console.log('Its ok');
}
}
</script>
The issue is in ../view/RegisterForm component which renders itself :
<template>
<RegisterForm></RegisterForm><!-- this is the component itself not th child one-->
</template>
<script>
import RegisterForm from '#/components/Register-form';
export default {
components: {
RegisterForm
},
name: "RegisterForm"
}
</script>
<style scoped>
</style>
this generates an infinite loop, to solve this just change the name of imported component :
<template>
<RegisterForm1></RegisterForm1>
</template>
<script>
import RegisterForm1 from '#/components/RegisterForm1';
export default {
components: {
RegisterForm1
},
name: "RegisterForm"
}
</script>
<style scoped>
</style>
change in App.vue =>
<template>
<router-view />
</template>
<template>
<router-view :key="$route.path" />
</template>

execute function in js defined on other page vue.js

I would like to execute a function in a Javascript file, since this same function is defined on another file, which is called Header.vue, I tried with module.export, but no result, the function in Header.vue is activated at the click of a button. I searched on Google and I think that module.export is only adapted between two .js files. my code is so below.
Header.vue :
<template>
<header id="header" class="flex">
<h1>
TEST
</h1>
<ul class="control">
<li>
<button #click="next" :disabled="connectionState !== 'open'">Next</button>
</li>
</ul>
</header>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
module.export {
export default {
name: 'app-header',
computed: mapState(['localStream', 'connectionState']),
methods: {
...mapMutations(['createPeerConnection', 'closePeerConnection', 'addLocalStream', 'removeLocalStream']),
...mapActions(['getUserMedia', 'hangUpCall']),
next () {
this.closePeerConnection()
this.hangUpCall()
this.createPeerConnection()
this.addLocalStream(this.localStream)
},
}
}<br>};
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
and test.js
var common = require('./src/components/Header.vue');
1
common.next();<br><br>

VueJS vue-spinner property or method "loading" is not defined

Hello I'm trying to set up view-spinner, But an error appears:
vue.esm.js:591 [Vue warn]: Property or method "loading" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
That's my main JS (app.js):
import Vue from 'vue';
import App from './App.vue'
import axios from 'axios'
import router from './router'
import store from './vuex/store';
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
require('../scss/style.scss');
Vue.config.productionTip = false;
Vue.prototype.$http = axios;
new Vue({
el: '#vueApp',
router,
store,
template: '<App/>',
components: {
App,
PulseLoader
},
});
My .vue
<template>
<div class="app">
<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<router-link class="nav-item" tag="li" to="/" active-class="active">
<a class="nav-link">Home</a>
</router-link>
<router-link class="nav-item" tag="li" to="/wow" active-class="active">
<a class="nav-link">Wow</a>
</router-link>
</ul>
</div>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data: () => {
return {
color: '#000000',
size: '1000px'
}
}
}
</script>
<style lang="scss">
</style>
Thanks for your help.
in your data object add loading property and import the module as follow :
import PulseLoader from "vue-spinner/src/PulseLoader.vue";
export default{
data: () => {
return {
color: '#000000',
size: '1000px',
loading:true
}
},
components:{PulseLoader}
...
}
or you could use computed a property like :
computed:{
loading(){ return true;}
}
you could do whatever you want and return a boolean value with loading name
It looks like you are setting up vue-spinner in the wrong place, i.e main.js instead of App.vue.
This works (see CodeSandbox)
main.js
import Vue from "vue";
import App from "./App";
// import PulseLoader from "vue-spinner/src/PulseLoader.vue";
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: "#vueApp",
template: "<App/>",
components: {
App,
// PulseLoader
}
});
App.vue
<template>
<div id="app">
<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
...
</div>
</template>
<script>
import PulseLoader from "vue-spinner/src/PulseLoader.vue";
export default {
name: "App",
data() {
return {
loading: true,
color: "#2c3e50",
size: "10px"
};
},
components: {
PulseLoader,
...
}
};
</script>
<style>
...

Categories