In my default layout I have header and footer for every page. But in error pages I need a full page without header and footer. So I made another layout and I'm calling it in the export default section. But it's still have header and footer.
default.vue
<template>
<div>
<app-header></app-header>
<nuxt />
<app-footer></app-footer>
</div>
</template>
<script>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer,
}
}
</script>
error.vue
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<nuxt-link to="/">Home page</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'fullpage' // you can set a custom layout for the error page
}
</script>
fullpage.vue
<template>
<div>
<nuxt />
</div>
</template>
Where I'm wrong?
You can do like this
1 - create a layouterror.vue file inside layouts folder (Put nothing inside just the basic code).
<template>
<div>
</div>
</template>
<script>
export default {}
</script>
<style>
</style>
2 - create a error.vue file inside layouts folder.
3 - and pass your error file a layout like this =>
export default {
layout: 'layouterror'
}
Maybe its help
Thanks !
ON Your Nuxt Project Folder called layouts, Create a file named error.vue and it will automatically detect all your 404 error which is page not found.
error.vue
<template>
<div class="error-page">
<h1>Oops, something went wrong!</h1>
<p>Back to safety!</p>
</div>
</template>
<style scoped>
.error-page {
text-align: center;
}
.error-page a {
text-decoration: none;
color: red;
}
.error-page a:hover,
.error-page a:active {
color: salmon;
}
</style>
Related
I am making a component InputText.vue as follows:
<template>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h4>Edit Text:</h4>
<textarea class="form-control" cols="50" rows="4" placeholder="Enter text here..." v-model="textBoxInput" #keyup="textChanged"></textarea>
</div>
</div>
</div>
</template>
<script>
export default{
data: function(){
return {
textBoxInput: ""
}
},
methods: {
textChanged: function(){
this.$emit('displayTextChanged', this.textBoxInput);
}
}
}
</script>
Then I am registering and using it in CardFront.vue component as follows:
<style>
.edit-area {
padding: 20px;
height: 800px;
background-color: #d2f9f9;
}
.card-display {
padding: 20px;
height: 800px;
}
</style>
<template>
<div class="row">
<div class="card col-sm-6 edit-area">
<cc-text-area></cc-text-area>
</div>
<div class="card col-sm-6 card-display">
</div>
</div>
</template>
<script>
import TextInput from './TextInput.vue'
export default{
components: {
ccTextArea: TextInput
}
}
<script>
It gives this error:
Error
Please help me out. I am using Vue version 2. Whenever I try to refresh the page, it gives error like: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I am making a component InputText.vue as follows:
Check that the filename and component names match.
If you import TextInput from './TextInput.vue' in the using component, then also make sure you name your component that, and optionally add a name property as suggested in the comments.
// TextInput.vue (not InputText.vue)
export default {
name: 'TextInput',
...
}
I solved the issue. Thank you so much everyone for your help. The issue lied in the closing script tag in CardFront.vue component.
I'm trying to render a Vue component within an iFrame but can't seem to get it to work. I've created a Vue widget that can be used on different websites but when using it on a website using Vuetify, the styles don't render correctly due to conflicts (my widget is using Vueitify which is what causes that problem).
My fallback therefore is to render the component in an iFrame.
This is what the App.vue file looks like. Ideally I want to encapsulate that parent div within an iFrame.
<template>
<div>
<!-- Production -->
<v-app v-if="env === 'production' && id" class="boodil-app">
<v-main>
<Payment :id="id"></Payment>
</v-main>
<!-- <router-view/> -->
</v-app>
<!-- Development -->
<v-app v-else-if="env === 'development'" class="boodil-app">
<v-main>
<Payment id="97155c9628574f30be5be7a21cb5c2c0"></Payment>
</v-main>
<!-- <router-view/> -->
</v-app>
</div>
</template>
<script>
import Payment from "#/views/Payment.vue";
export default {
props: ["id"],
components: {
Payment,
},
beforeMount() {},
data() {
return {
env: process.env.NODE_ENV,
};
},
};
</script>
<style>
.boodil-app > .v-application--wrap {
min-height: fit-content !important;
}
</style>
I want to have many card from my component and I want to change the src attribute on every image. Please help me to do it. Thankyou :D
<!---THIS IS MY PAGE FILE---->
<template>
<div>
<class-list :src="image1"></class-list>
<class-list :src="image2"></class-list>
<class-list :src="image3"></class-list>
<class-list :src="image4"></class-list>
</div>
</template>
<!---THIS IS MY COMPONENT FILE---->
<template>
<div>
<a-card hoverable style="width: 240px">
<img
slot="cover"
alt="example"
:src="image"
/>
<a-card-meta title="Europe Street beat">
<template slot="description">
www.instagram.com
</template>
</a-card-meta>
</a-card>
</div>
</template>
This kind of code should solve your use-case, here is a SFC link.
page
<template>
<div v-for="image in images">
<card :image="image"></card>
</div>
</template>
<script>
import Card from './Card.vue'
export default {
components: { Card },
data() {
return {
images: ['https://images.pexels.com/photos/5044497/pexels-photo-5044497.jpeg', 'https://images.pexels.com/photos/9365604/pexels-photo-9365604.jpeg', 'https://images.pexels.com/photos/10392192/pexels-photo-10392192.jpeg']
}
}
}
</script>
Card.vue
<template>
<div>
<img slot="cover" alt="example" :src="image" />
</div>
</template>
<script>
export default {
props: ['image']
}
</script>
<style scoped>
img {
width: 200px;
}
</style>
Here is the end result
I want to create a very simple nuxt transition between child routes.
The structure is:
index.vue
index
--one.vue
--two.vue
--three.vue
index.vue:
<template>
<div>
<nuxt-link to="/one">one</nuxt-link>
<nuxt-link to="/two">two</nuxt-link>
<nuxt-link to="/three">three</nuxt-link>
<nuxt-child :key="$route.fullPath"></nuxt-child>
</div>
</template>
<script>
export default {
transition: 'fade',
data(){
return {
}
},
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active{
transition: all 1s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
.fade-leave, .fade-enter-to{
opacity: 1;
}
</style>
The child components:
one.vue:
<template>
<div>
1
</div>
</template>
two.vue
<template>
<div>
2
</div>
</template>
three.vue
<template>
<div>
3
</div>
</template>
The problem is:
that nothing happens! when I change routes, they change in a way like there is no transition.
what I have done:
I tried to do exactly what the nuxt document has said.
Also I searched a lot about it, but unfortunately, none of the similar questions have been answered.
question1
question2
question3
I´m using vue.js to build application and i am stuck with this warning that affects all my app router-links apparently.
I know that this may be due to multiple vue instances op but i already checked and i don´t know where it may be!
Sidenav.vue
<template>
<section id="sidenav">
<router-link to="/" tag="button" class="uk-button uk-button-default uk-button-large uk-width-1-1
uk-margin-small-bottom" active-class="uk-button-primary" exact> Home </router-link>
<router-link to="/sistema" tag="button" class="uk-button uk-button-default uk-button-large uk-width-1-1
uk-margin-small-bottom" active-class="uk-button-primary"> Gestão de Sistema </router-link>
<router-link to="/consumo" tag="button" class="uk-button uk-button-default uk-button-large uk-width-1-1
uk-margin-small-bottom" active-class="uk-button-primary"> Pontos de Consumo </router-link>
<router-link to="/controlo" tag="button" class="uk-button uk-button-default uk-button-large uk-width-1-1"
active-class="uk-button-primary">
Controlo</router-link>
</section>
</template>
<script>
export default ({
});
</script>
<style>
</style>
Here is the warning that affects my app:
vue.js:597 [Vue warn]: $listeners is readonly.
found in
---> <RouterLink>
<AppSidenav> at src/components/Sidenav.vue
<App> at src/App.vue
<Root>
App.vue
<template>
<div id="app">
<div class="uk-container" style="margin-top:10px;" v-if="checkLogin()">
<app-header></app-header>
<div class="uk-grid my-grid">
<div class="uk-width-1-4 my-nav">
<app-sidenav></app-sidenav>
</div>
<div class="uk-width-3-4" style="border-left:1px solid #e5e5e5; padding-top: 10px;">
<router-view></router-view>
</div>
</div>
<app-footer></app-footer>
</div>
<app-login v-else></app-login>
</div>
</template>
<script>
import Header from './components/Header';
import Sidenav from './components/Sidenav';
import Home from './components/Home';
import Footer from './components/Footer';
import Login from './components/login/Login';
import {mapGetters} from 'vuex';
export default {
components: {
'appHeader': Header,
'appSidenav': Sidenav,
'appHome': Home,
'appFooter': Footer,
'appLogin': Login,
},
computed: {
checkLogin() {
return this.isLoggedIn;
}
},
methods:{
...mapGetters(['isLoggedIn']),
},
}
</script>
<style>
.my-grid{
border-top:1px solid #e5e5e5;
margin-top: 10px !important;
}
.my-nav{
padding: 20px 10px 20px 10px;
/*padding-top: 50px;*/
/*padding-bottom: 20px;*/
border-bottom: 1px solid #e5e5e5;
/*padding-left:10px;*/
/*padding-right:10px;*/
/*background-color: #F0F0F0;*/
}
</style>
I have routes.js and store.js where i import vue and use Router and Vuex respectively inside both files.
Found the issue, i am using vue package through npm but i was also importing vue in my index.html file!
Just removed it and everthing is fine now!