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>
Related
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>
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 am new in ReactJS
I have created a child component called footer and also installed Bootstrap package but not receiving any style in footer.
Code App.js --
import React, { Component }from 'react';
import './App.css';
import Header from './components/header';
import Footer from './components/footer';
class App extends Component {
render() {
return (
<div>
<Header />
<Footer />
</div>
);
}
}
export default App;
Footer.js under components folder
import React from 'react';
const Footer = () => {
return (
<footer className="page-footer font-small blue">
<div className="footer-copyright text-center py-3">© 2019 Copyright:
Test.com
</div>
</footer>
);
};
export default Footer;
index.js --
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.register();
But there is no styling in footer.
Any help is highly appreciated.
Well, the problem is that you don't import bootstrap properly, do you have import errors in your console ?
import 'bootstrap/dist/css/bootstrap.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
try to import by one of i written above.
In your app.css import bootstrap.css like this
import 'bootstrap/dist/css/bootstrap.css';
Then restart your server
That simply means you did not correctly import bootstrap, i dont know how your code is structured so i would suggest you use the cdn version below and link it in your index.html file.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
this means you have to online everytime you use it.
Another option i would suggest is that you use reactstrap which would be easier for you as a beginner. install by using npm install --save reactstrap and then you can use it any component you want. you google the documentation for more details.
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 keep getting this error with React:
_registerComponent(...): Target container is not a DOM element.
I'm using "create-react-app" with Yarn. There's three main files of code.
Here's the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<div id="hw"></div>
</body>
</html>
And index.js:
import './index.css'
import React from 'react'
import {render} from 'react-dom'
import Hello from './Hello'
render(<Hello/>, document.querySelector('#hw'))
And Hello.js
import './helloworld.css'
import React, {Component} from 'react'
class Hello extends Component {
render() {
return
<div className="HelloWorld-hello HelloWorld-flex">
<h1>Hello</h1>
</div>
}
}
export default Hello
I've tried everything I can think of. All files are in the same "src" directory. This all started when I was trying to render two components within index.js using this:
render(
<div>
<Hello/>
<World/>
</div>,
document.querySelector('#hw'))
I found the issues, although I don't understand why one is happening. Apparantely, it's only working when I use root as the name of the div in index.html.
<body>
<div id="root"></div>
</body>
And index.js
import './index.css'
import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'
import World from './World'
ReactDOM.render(<div><Hello/><World/></div>,
document.getElementById('root'))
In the Hello.js file, I placed the div outside of the line with return. Once I moved the div to start on that line.
import './helloworld.css'
import React, {Component} from 'react'
class Hello extends Component {
render() {
return <div className="HelloWorld-hello HelloWorld-flex">
<h1>Hello</h1>
</div>
}
}
export default Hello
I think I understand why I would need to put the <div> on the same line as the return, but I'm completely clueless about why only the word root works for the div id. I've tried all kinds of other words and get the same error.
Ultimately I was trying to have two separate child components (Hello.js and World.js) nested under a parent component (index.js).