I'm trying to write a landing page, and I'm attempting to use a v-parallax element that covers the whole page and can be scrolled down.
In my code, I have a view named LandingPage.vue, a component named TopPageParralax.vue, and then my main App.vue.
LandingPage.vue:
<template>
<v-container>
<top-page-parralax />
</v-container>
</template>
<style></style>
<script>
import TopPageParralax from "#/components/TopPageParralax.vue";
export default {
name: `LandingPage`,
components: {TopPageParralax},
};
</script>
<style>
</style>
TopPageParralax.vue:
<template>
<v-container>
<v-parallax height="100vh" src="https://braydenjohnsondevlandiing.s3.amazonaws.com/Complex+Square+Grid+With+Drop+Shadows.png">
<v-row class="fill-height" align="center" justify="center">
<v-col cols="12" class="text-center">
<h1 class="display-2 font-weight-bold mb-3">Brayden Johnson</h1>
<h2 class="display-4 font-weight-light">Front End Web Developer</h2>
</v-col>
</v-row>
</v-parallax>
</v-container>
</template>
<style>
v-parallax {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
<script lang='ts'>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'TopPageParralax',
});
</script>
App.vue
<template>
<v-app>
<v-main>
<router-view/>
</v-main>
</v-app>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'App',
})
</script>
<style> </style>
I'm expecting no margin, however I get the following result:
For some information:
I'm using Chrome V108.0.5359.126 and Vue 3 with Vuetify 3
You need to add the fluid property to v-container which fully extends the width.
To remove the default margin add ma-0 property to component class property
To remove the default padding add pa-0 property to component class property
Actually, the theme installed site is distracting. If you want to define your custom property then use !important suffex to css property. e.g margin: 10px !important;
Related
I installed the Vue Social Chat module into my Nuxt app and having trouble to understand how the props and color setting work. At present everything works fine, although the whatsapp Icon displayed is black as well as the top bar situated inside the speech bubble. How would I go about changing this in Nuxt. The author says to use css variables, but I have no idea where to put these and how to use them in my code.
Nuxt also does not have an App.vue so i just imported the module directly which seems to work but I am not sure I am doing it correctly.
This is what my current default.vue page looks like. I do not import the module any place else.
<template>
<v-app dark>
<v-main>
<Nuxt />
</v-main>
<div>
<SocialChat
icon
:attendants="attendants"
>
<p slot="header" >Chat to us on whatsapp for any question, or sales related topics.</p>
<template v-slot:button>
<img
src="https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/icons/whatsapp.svg"
alt="icon whatsapp"
aria-hidden="true"
>
</template>
<small slot="footer">Opening hours: 8am to 6pm</small>
</SocialChat>
</div>
</v-app>
</template>
<script>
import { SocialChat } from 'vue-social-chat'
export default {
name: 'DefaultLayout',
components: {
SocialChat
},
data() {
return {
attendants: [
{
app: 'whatsapp',
label: '',
name: '',
number: '',
avatar: {
src: '',
alt: ''
}
},
// ...
],
}
},
}
</script>
<style>
.container {
max-width: 1200px;
}
</style>
This is mainly what is needed overall
<template>
<div class="layout">
<nuxt />
<social-chat id="social-button" icon :attendants="attendants">
<p slot="header">
Click on one of our attendants below to chat on WhatsApp.
</p>
<template #button>
<img
src="https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/icons/whatsapp.svg"
alt="icon whatsapp"
aria-hidden="true"
/>
</template>
<small slot="footer">Opening hours: 8am to 6pm</small>
</social-chat>
</div>
</template>
<script>
import { SocialChat } from 'vue-social-chat'
export default {
name: 'DefaultLayout',
components: {
SocialChat,
},
data() {
return {
attendants: [
{
app: 'whatsapp',
label: 'Technical support',
name: 'Alan Ktquez',
number: '5581983383532',
avatar: {
src: 'https://avatars0.githubusercontent.com/u/8084606?s=460&u=20b6499a416cf7129a18e5c168cf387e159edb1a&v=4',
alt: 'Alan Ktquez avatar',
},
},
],
}
},
}
</script>
<style>
:root #social-button {
--vsc-bg-header: orange;
--vsc-bg-footer: #fafafa;
--vsc-text-color-header: yellow;
--vsc-text-color-footer: green;
--vsc-bg-button: pink;
--vsc-text-color-button: purple;
--vsc-outline-color: #333;
--vsc-border-color-bottom-header: teal;
--vsc-border-color-top-footer: #f3f3f3;
}
</style>
Instead of :root #social-button CSS selector, we may have used --vsc-bg-button: pink !important; too but I don't like to nuke CSS specificity.
Also, the style can be scoped but there is no really implication here anyway because you will not get any scoping issue here.
A github repo can be found here: https://github.com/kissu/vue-social
And a hosted working example available here: https://so-vue-social.netlify.app/
I'm just getting started with Vue JS and I'm performing a pretty basic component import like this:
<script>
import footer from '#/templates/footer.vue'
export default {
components: {
footer
}
}
</script>
<style>
#import '#/css/style.css';
</style>
The problem is that the styles from style.css isn't being applied to the elements inside footer.vue. How can I apply the styles from style.css to elements inside footer.vue?
Thanks!
Update
The footer component just looks like this:
<template >
<view id="footer_outer_container">
...
</view>
</template>
<script>
export default {
name: "footer",
props: {},
methods: {}
}
</script>
<style>
</style>
And the CSS is just a regular style.css file some classes and styles.
I have this template for a Vue component (See it in CODEPEN):
<div class="some-class">
<v-form >
<v-container #click="someMethod()">
<v-row>
<v-col cols="3" sm="3" v-for="p in placeholders" :key="p">
<v-text-field :placeholder="p" single-line outlined >
</v-text-field>
</v-col>
</v-row>
</v-container>
</v-form>
</div>
where placeholders is an array like:
['Title 1', 'Title 2', 'Title 3',...'Title 21']
and some-class is in the style section of the component:
<style>
div.some-class {
display: inline-block;
max-width: 100%;
overflow-x: auto;
}
</style>
I would like to have them all on one line so I can scroll horizontally. But instead I get this:
How can I tweak the style to see all the text fields on one line?
Vuetify uses a flex grid. The reason that it's not overflowing is that you have to set the flex-wrap to nowrap.
Basically, just add the styles below to your v-row:
.nowrap-overflow {
flex-wrap: nowrap;
overflow-x: auto;
}
Modified codepen here:
https://codepen.io/CodingDeer/pen/zYYGOGd
I have a parent component:
<template>
<ChildComponent :styles="styles" />
</template>
<script>
export default {
data: () => ({
styles: `
p {
color: red
}
`
})
}
</script>
And this is the child component:
<template>
<p>Hello World</p>
</template>
<script>
export default {
props: {
styles: {
type: String,
required: true
}
}
}
</script>
<style scoped>
</style>
Now I want to use those styles provided by the parent component in child as scoped styles. Like for example:
<!-- ChildComponent.vue -->
<style scoped>
p {
color: red
}
</style>
Is there any way to do so?
If you want to target the child elements with scoped styling you have to use the deep selector.
Which can be done with
a >>> b { color : red; }
/deep/ a b { color : red; }
a::v-deep b { color : red; }
Here is the full explanation: https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
If you wanna add the style in your child component, based on the parent component which is calling it, you can pass an attribute as a prop and use it as a class into the child component. Following your example:
Parent component:
<template>
<ChildComponent styles="parent-style" />
</template>
Child component:
<template>
<section :class="styles">
<p>Hello World</p>
</section>
</template>
<script>
export default {
props: {
styles: {
type: String,
required: true
}
}
}
</script>
<style lang="scss" scoped>
.parent-style {
p {
color: red;
}
}
</style>
Please note that it does not answer scoped CSS.
I am using CSS modules, still might help or just to improve following approach.
Send class names to child component from parent, such as:
Parent Template
<template>
<header :class="$style.Header">
<!-- send class names to **Child-Component** using `v-bind` through the className attribute -->
<HeaderLogo :className="$style.Header__logo" />
</header>
</template>
Child-Template
<template>
<div :class="className">Blah</div>
</template>
CSS Module
<style lang="scss" module>
.Header {
white-space: nowrap;
&__logo {
width: 100%;
}
}
</style>
I just made my first project with VueJS and Vue-loader.
So I made my first component to show a simple message, it works fine when I make one message, but I get an error when I make multiple messages:
(Emitted value instead of an instance of Error)
Error compiling template:
<message>This is a small message!</message>
<message>Another one</message>
- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
This is my code. I'm very new to this and I can't figure out what's wrong.
App.vue
<template>
<message>This is a small message!</message>
<message>Another one</message>
</template>
<script>
import Message from './Components/Message.vue';
export default {
name: 'app',
components: {
Message,
},
data () {
return {
}
}
}
</script>
Message.Vue
<template>
<div class="box">
<p>
<slot></slot>
</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
.box { background-color: #e3e3e3; padding: 10px; border: 1px solid #c5c5c5; margin-bottom: 1em;}
</style>
I hope somebody can help!
The error is pretty self-explanatory. You should have only one root element in each component. So just pack everything in a div.
<template>
<div>
<message>This is a small message!</message>
<message>Another one</message>
</div>
</template>