I am creating a project spa in vuejs/ I have created common components Header and footer which I want to includes in main App.vue.
I am sharing my Code structure below:
I am sharing my file App.vue:
<template>
<header></header>
</template>
<script>
import Header from './components/Header.vue'
// import Footer from 'components/Footer.vue'
export default {
name: 'App',
components: {
Header,
// Footer
}
}
</script>
In the page of the Vue.js doesn't appear anything any idea how to include header and footer together to display good in spa vuejs.
Which is wrong in this way?
header and footer are native html elements, you should name your components with uncommon names, for example name them AppHeader and AppFooter and use them like :
<template>
<AppHeader />
<!-- other content-->
<AppFooter />
</template>
<script>
import {AppHeader} from './components/AppHeader.vue'
import {AppFooter} from './components/AppFooter.vue'
export default {
name:'App',
components:{ AppHeader, AppFooter}
}
</script>
Related
I've been playing around with some libraries and tested out react-text fun. I placed the blotter script in my html file and installed the library. When I test out an effect, I get two rendered elements on my page. Any ideas on how to fix this?
public HTML:
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://unpkg.com/blotterjs-fork#0.1.0/build/blotter.min.js"></script>
</body>
component:
import React from 'react'
import { LiquidDistortionText } from 'react-text-fun'
// styles
import { Header, HeroContainer } from './Home.styles'
// components
export default function Home() {
return (
<Header>
<HeroContainer>
<LiquidDistortionText
text="Text"
speed={0.25}
rotation={0.2}
distortX={0}
distortY={0.2}
noiseAmplitude={0.1}
noiseVolatility={1}
/>
</HeroContainer>
</Header>
)
}
rendered webpage
Everything looks correct. You should look at your Header Component and HeroContainer. Maybe you used children twice times.
We are running Nuxt in a monorepo and things are working well. We are utilizing a /base directory containing our reusable components and stylesheets, and each project has its own subdirectory within a /projects directory.
Our global variables/mixins are being added to the base nuxt.config.js via the #nuxtjs/style-resources module which we then extend and import into the project's own nuxt.config.js.
In our components, we are hoping to dynamically import a project-specific stylesheet using an environment variable. We currently have something like:
//component-name.vue
<template>
//Template things
</template>
<script>
export default {
data() {
return {
projectPrefix: process.env.PROJECT_PREFIX
}
}
}
}
</script>
<style lang="scss">
#import 'base/assets/styles/scss/_component-name.scss';
//We would like to import the JUST ONE of the following stylesheets based on projectPrefix
#import './projects/project-foo/assets/styles/scss/_component-name.scss';
#import './projects/project-bar/assets/styles/scss/_component-name.scss';
#import './projects/project-baz/assets/styles/scss/_component-name.scss';
...
</style>
At the moment, everything works fine in terms of the styles being displayed correctly per project. The problem is that we also include a bunch of unused styles in this way.
Does anyone know of a good solution for how we might be able to dynamically import a stylesheet based on an environment variable?
You could create a component for env variable. Something like:
<template>
<component-with-style-a v-if="projectPrefix === 'A'" />
<component-with-style-b v-else />
</template>
<script>
export default {
data() {
return {
projectPrefix: process.env.PROJECT_PREFIX
}
}
}
}
</script>
I am working on ReactJS project and want to render an iframe which is rendering using third party script.
Kindly check the problem below:
I have an component name add-data.js.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Helmet from 'react-helmet';
import ogImage from '../../../../public/images/qcf-logo-whitebg.svg';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import ApplyNowNavbar from '../Header/ApplyNowHeader';
import ApplyNowFooter from '../Footer/ApplyNowFooter';
export default class ApplyNow extends Component {
render() {
return (
<div>
<Navbar />
<div id="iframe-container"></div> //iframe will be loadd inside this div
<Footer />
</div>
);
}
}
index.html main file
<!doctype html>
<html>
<head>
<script src="www.example.com/iframe-script.js"></script> <!--this file will load iframe in iframe-container div-->
</head>
<body>
<div id="app"></div>
<script src="../js/app.js"></script>
</body>
</html>
this code works only when reload the page but I want to render iframe without reload the page but render ReactJS component.
Can anybody help me out how can I do that.
Thanks in advance.
I'm trying to work with this Code Sandbox for the NPM Package vue-fixed-header. In the Code Sandbox, the fixed header is in the main App.vue file. I'm trying to isolate it to its own file by moving all necessary parts to the HelloWorld.vue component inside the component directory. After moving everything, the HelloWorld.vue file looks like this:
<template>
<VueFixedHeader
:threshold="propsData.threshold"
:headerClass="propsData.headerClass"
:fixedClass="propsData.fixedClass"
>
<nav>
<el-menu>
<el-menu-item style="pointer-events: none;" index="1">
Fixed Header
</el-menu-item>
</el-menu>
</nav>
</VueFixedHeader>
</template>
<script>
import VueFixedHeader from "vue-fixed-header";
export default {
name: 'fixedHeader',
components: {
VueFixedHeader,
}
}
</script>
...
I then try to import this file to be used inside App.vue:
<template>
<div id="app">
<fixedHeader /> <-- tried importing here
...
</div>
</template>
<script>
import Vue from "vue";
import fixedHeader from './components/HelloWorld' <-- tried importing file here
...
This doesn't work though, and Code Sandbox says that fixedHeader is defined but never used.
It's always a good practice to define vue components with capitalised camel-casing.
Change the component name of fixedHeader to FixedHeader (can work without this step)
Use it as below:
<template>
<div id="app">
<fixed-header/> <-- tried importing here
...
</div>
</template>
<script>
import FixedHeader from './components/HelloWorld'
export default {
components: {
FixedHeader
}
}
<template>
<div id="app">
<fixedHeader /> <-- tried importing here
...
</div>
</template>
<script>
import Vue from "vue";
import fixedHeader from './components/HelloWorld' <-- tried importing file here
export default{
components: {
fixedHeader,
}
}
</script>
I've installed Vue.js framework called element but I'm getting this error.
I'm importing all I need to index.html and Reviews.vue file which only contains:
<template>
<div id="app">
<el-button type="primary" round>Primary</el-button>
</div>
</template>
<script>
import Vue from 'vue'
import ColorPicker from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default {}
</script>
<style lang="scss">
</style>
All I'm getting as a result is text "Primary"
this 'quick start' snippet from the element github page will put you in the right direction:
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
// or
import {
Select,
Button
// ...
} from 'element-ui'
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
Basically, you either load all the elements with the Vue.use syntax (which I believe will load all of them into your bundle, so you maybe don't want to do so if you're not using a lot of element components in your app), or you load element's Button component in your component:
<template>
<div id="app">
<el-button type="primary" round>Primary</el-button>
</div>
</template>
<script>
import Vue from 'vue'
import ColorPicker from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// mind this new line:
import {Button} from 'element-ui'
export default {}
</script>
<style lang="scss">
</style>