I have a navbar,Home and login elements. It is simple login page. I want to add api to go home and login page. For this i have router.js file. I am sharing all of file here.
This is my Main.js
import Vue from 'vue'
import App from './App.vue'
import useRoute from './router'
Vue.config.productionTip = false
new Vue({
useRoute,
render: h => h(App),
}).$mount('#app')
And Router.js
import Vue from 'vue'
import { useRoute } from 'vue-router'
import Home from './components/Home.vue'
import LoginPage from './components/Login.vue'
Vue.use(useRoute)
export default new useRoute({
routes: [
{ path: '/', component: Home },
{ path: '/login', component: LoginPage }
]
})
App.vue
<template>
<div id="app">
<NavBar />
<div class="auth-wrapper">
<div class="auth-inner">
<router-view />
</div>
</div>
</div>
</template>
<script>
import NavBar from './components/Nav.vue'
export default {
name: 'App',
components: {
NavBar,
}
}
</script>
<style>
#import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');
* {
box-sizing: border-box;
}
body {
background: #1C8EF9 !important;
min-height: 100vh;
display: flex;
font-weight: 400;
font-family: 'Fira Sans', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
label,
.span {
font-weight: 500;
font-family: 'Fira Sans', sans-serif;
}
body,
html,
#app,
#root,
.auth-wrapper {
width: 100%;
height: 100%;
}
#app {
text-align: center;
}
.navbar-light {
background-color: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}
.auth-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.auth-inner {
width: 450px;
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all .3s;
}
.auth-wrapper .form-control:focus {
border-color: #167bff;
box-shadow: none;
}
.auth-wrapper h3 {
text-align: center;
margin: 0;
line-height: 1;
padding-bottom: 20px;
}
.custom-control-label {
font-weight: 400;
}
.forgot-password,
.forgot-password a {
text-align: right;
font-size: 13px;
padding-top: 10px;
color: #7f7d7d;
margin: 0;
}
.forgot-password a {
color: #167bff;
}
</style>
And for easy finding i am sharing console error
And also i want to share this information that if i write "/login" or "/" it just going to home page,and nothing changing
vue.runtime.esm.js?c320:4605 [Vue warn]: inject() can only be used inside setup() or functional components.
warn # vue.runtime.esm.js?c320:4605
vue.runtime.esm.js?c320:4605 [Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue
<Root>
Related
This question already has answers here:
How to load different .css files on different components of a react application?
(4 answers)
Closed 6 months ago.
I have found some strange issue while making my website with React.
I have organized my filesystem into a folder of components-js and components-css with corresponding Text.js and Text.css files to match up.
Below are my Login.js/css and Signup.js/css files.
Login.js
import '../components-css/Login.css';
import Logo from './Logo.js';
import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import TextInput from './TextInput.js';
function Login(props) {
const [error, setError] = useState(false);
const navigate = useNavigate();
const trigger_error = () => {
console.log(error)
if (error === false) {
setError(true);
}
else {
setError(false);
}
}
const check_login_info = () => {
// TODO: Insert code here to check for username and password match
navigate('/Jobs')
}
return (
<div className='login-card'>
<div className='login-card-image'>
</div>
<div className='login-contents'>
<Logo/>
<div className='login-contents-header'>
Sign In
{error ? <p className='error'>Invalid Login. Please try again.</p>: <></>}
</div>
<TextInput label={'Email'}/>
<TextInput label={'Password'}/>
<input type='button' className='submit' onClick={() => check_login_info()} value='Log In'/>
<div className='bottom_text'>
New to Product? <Link className='sign-up' to='/signup'>Sign Up</Link>
</div>
</div>
</div>
)
};
export default Login;
Login.css
.login-card {
background-color: white;
border-radius: 20px;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 90%;
width: 90%;
padding: 0px;
justify-content: center;
align-items: center;
display:flex;
}
#media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
.login-card {
flex-direction: column-reverse;
}
}
#media (min-width:800px) {
.login-card {
flex-direction: row;
}
}
/* Uncomment for card-style background image */
.login-card-image {
background-image: url('../images/login-background-3.jpg');
height: 100%;
width: 100%;
background-size: cover;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
/* border-radius: 20px; */
}
.login-contents {
display: flex;
padding: 10%;
width: 50%;
flex-direction: column;
/* background-color: red; */
}
#media (min-width:800px) {
.login-contents-header {
margin: 5%;
padding: 5%;
font-size: 30px;
height: 50%;
justify-content: center;
text-align: center;
}
}
#media (max-width:800px) {
.login-contents-header {
margin: 5%;
padding: 5%;
padding-bottom: 0px;
margin-bottom: 0px;
font-size: 20px;
height: 50%;
justify-content: center;
text-align: center;
}
}
.login-contents span {
padding-top: 40px;
}
/* CSS */
.submit {
align-items: center;
background-color: rgb(202, 225, 246);
border-radius: 12px;
box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px;
box-sizing: border-box;
color: #121212;
cursor: pointer;
display: inline-flex;
flex: 1 1 auto;
font-family: Inter,sans-serif;
font-size: 1.2rem;
font-weight: 700;
justify-content: center;
line-height: 1;
margin: 10%;
margin-left: 25%;
outline: none;
padding: 15px;
text-align: center;
text-decoration: none;
transition: box-shadow .2s,-webkit-box-shadow .2s;
width: 50%;
white-space: nowrap;
border: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.submit:hover {
box-shadow: rgb(148, 179, 206) 0 0 0 3px, transparent 0 0 0 0;
}
.submit {
color: black;
text-decoration: none;
}
.bottom_text {
/* background-color: red; */
justify-content: center;
text-align: center;
}
.sign-up {
color: rgb(26, 158, 202);
text-decoration: none;
}
.error {
color: red;
font-size: 20px;
margin: 0px;
margin-top: 30px;
}
Signup.js
import '../components-css/Signup.css'
import Logo from '../components-js/Logo.js';
import TextInput from './TextInput.js';
import Back from '../images/arrow.png';
import {Link} from 'react-router-dom'
function Signup() {
return (
<div className='signup'>
<div className='signup-form-container'>
<div className='signup-form-padding'>
<div className='back'>
<Link to='/'>
<img src={Back} alt='backarrow' width='100%' height='80%'/>
</Link>
</div>
<div className='logo'>
<Logo/>
</div>
<div className='header'>
Create Account
</div>
<div className='form-container'>
<form className='form'>
<TextInput label={'First Name'}/>
<TextInput label={'Last Name'}/>
<TextInput label={'Email'}/>
<TextInput label={'Phone Number'}/>
<TextInput label={'Password'}/>
<TextInput label={'Confirm Password'}/>
</form>
<input className='submit' type='submit' value='Submit'></input>
</div>
</div>
</div>
</div>
);
}
export default Signup;
Signup.css
.signup {
justify-content: center;
height: 100vh;
/* background-color: red; */
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.signup-form-container {
height: 85%;
width: 40%;
margin: auto;
margin-top: 3%;
margin-bottom: 5%;
background-color: white;
border-radius: 50px;
overflow: auto;
}
.signup-form-padding {
height: 90%;
width: 90%;
margin: auto;
margin-top: 5%;
/* background-color: red; */
justify-content: center;
position: relative;
}
.back {
position: absolute;
top: 0px;
}
.back img{
width: 20px;
height: 20px;
}
.logo {
height: 11%;
width: 70%;
margin:auto;
display:flex;
flex-direction: row;
/* background-color: red; */
}
.header {
text-align: center;
font-size: 20px;
margin-bottom: 2%;
}
.form {
width: 60%;
justify-content: center;
margin-bottom: -50px;
}
.form input {
margin-top: 0px;
margin-left: 0px;
}
.submit {
}
When rendering my Signup page, it somehow uses the css from Login.css to show the Submit button. Upon further inspection, it appears the browser is loading ALL of my css files, one by one (in the on the screenshot below). I noticed this by looking at the inspector on the browser itself:
What is happening? I'm not sure why it seems to render all of the styles at once.
This is expected. ESM imports, including CSS via things like webpack are static imports. They will be loaded as soon as the bundle loads, and it doesn't matter if the component you imported it in is loaded or not. Its included because somewhere in your code you import login, as well as signup -- so the CSS imports are resolved in one go.
Css-in-js libs like styled-components do only load the styles if the relevant component is rendered. Static CSS importing is not really css-in-js. Those are globally provided. You might consider those solutions if you want better scoping of styles.
You could also consider CSS modules.
One very easy way to solve this would be to start using Sass and wrap all your CSS for a given page in class names and then within your pages, apply the class name to the outermost div.
To enable Sass support:
npm install sass --save-dev
Then rename your .css files to .scss and update imports.
Login.scss
.login-card {
// all styes specific to login page go here
}
Signup.scss
.signup {
// all styles specific to signup page go here
}
This question already has answers here:
How to load different .css files on different components of a react application?
(4 answers)
Closed 6 months ago.
I have found some strange issue while making my website with React.
I have organized my filesystem into a folder of components-js and components-css with corresponding Text.js and Text.css files to match up.
Below are my Login.js/css and Signup.js/css files.
Login.js
import '../components-css/Login.css';
import Logo from './Logo.js';
import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import TextInput from './TextInput.js';
function Login(props) {
const [error, setError] = useState(false);
const navigate = useNavigate();
const trigger_error = () => {
console.log(error)
if (error === false) {
setError(true);
}
else {
setError(false);
}
}
const check_login_info = () => {
// TODO: Insert code here to check for username and password match
navigate('/Jobs')
}
return (
<div className='login-card'>
<div className='login-card-image'>
</div>
<div className='login-contents'>
<Logo/>
<div className='login-contents-header'>
Sign In
{error ? <p className='error'>Invalid Login. Please try again.</p>: <></>}
</div>
<TextInput label={'Email'}/>
<TextInput label={'Password'}/>
<input type='button' className='submit' onClick={() => check_login_info()} value='Log In'/>
<div className='bottom_text'>
New to Product? <Link className='sign-up' to='/signup'>Sign Up</Link>
</div>
</div>
</div>
)
};
export default Login;
Login.css
.login-card {
background-color: white;
border-radius: 20px;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 90%;
width: 90%;
padding: 0px;
justify-content: center;
align-items: center;
display:flex;
}
#media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
.login-card {
flex-direction: column-reverse;
}
}
#media (min-width:800px) {
.login-card {
flex-direction: row;
}
}
/* Uncomment for card-style background image */
.login-card-image {
background-image: url('../images/login-background-3.jpg');
height: 100%;
width: 100%;
background-size: cover;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
/* border-radius: 20px; */
}
.login-contents {
display: flex;
padding: 10%;
width: 50%;
flex-direction: column;
/* background-color: red; */
}
#media (min-width:800px) {
.login-contents-header {
margin: 5%;
padding: 5%;
font-size: 30px;
height: 50%;
justify-content: center;
text-align: center;
}
}
#media (max-width:800px) {
.login-contents-header {
margin: 5%;
padding: 5%;
padding-bottom: 0px;
margin-bottom: 0px;
font-size: 20px;
height: 50%;
justify-content: center;
text-align: center;
}
}
.login-contents span {
padding-top: 40px;
}
/* CSS */
.submit {
align-items: center;
background-color: rgb(202, 225, 246);
border-radius: 12px;
box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px;
box-sizing: border-box;
color: #121212;
cursor: pointer;
display: inline-flex;
flex: 1 1 auto;
font-family: Inter,sans-serif;
font-size: 1.2rem;
font-weight: 700;
justify-content: center;
line-height: 1;
margin: 10%;
margin-left: 25%;
outline: none;
padding: 15px;
text-align: center;
text-decoration: none;
transition: box-shadow .2s,-webkit-box-shadow .2s;
width: 50%;
white-space: nowrap;
border: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.submit:hover {
box-shadow: rgb(148, 179, 206) 0 0 0 3px, transparent 0 0 0 0;
}
.submit {
color: black;
text-decoration: none;
}
.bottom_text {
/* background-color: red; */
justify-content: center;
text-align: center;
}
.sign-up {
color: rgb(26, 158, 202);
text-decoration: none;
}
.error {
color: red;
font-size: 20px;
margin: 0px;
margin-top: 30px;
}
Signup.js
import '../components-css/Signup.css'
import Logo from '../components-js/Logo.js';
import TextInput from './TextInput.js';
import Back from '../images/arrow.png';
import {Link} from 'react-router-dom'
function Signup() {
return (
<div className='signup'>
<div className='signup-form-container'>
<div className='signup-form-padding'>
<div className='back'>
<Link to='/'>
<img src={Back} alt='backarrow' width='100%' height='80%'/>
</Link>
</div>
<div className='logo'>
<Logo/>
</div>
<div className='header'>
Create Account
</div>
<div className='form-container'>
<form className='form'>
<TextInput label={'First Name'}/>
<TextInput label={'Last Name'}/>
<TextInput label={'Email'}/>
<TextInput label={'Phone Number'}/>
<TextInput label={'Password'}/>
<TextInput label={'Confirm Password'}/>
</form>
<input className='submit' type='submit' value='Submit'></input>
</div>
</div>
</div>
</div>
);
}
export default Signup;
Signup.css
.signup {
justify-content: center;
height: 100vh;
/* background-color: red; */
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.signup-form-container {
height: 85%;
width: 40%;
margin: auto;
margin-top: 3%;
margin-bottom: 5%;
background-color: white;
border-radius: 50px;
overflow: auto;
}
.signup-form-padding {
height: 90%;
width: 90%;
margin: auto;
margin-top: 5%;
/* background-color: red; */
justify-content: center;
position: relative;
}
.back {
position: absolute;
top: 0px;
}
.back img{
width: 20px;
height: 20px;
}
.logo {
height: 11%;
width: 70%;
margin:auto;
display:flex;
flex-direction: row;
/* background-color: red; */
}
.header {
text-align: center;
font-size: 20px;
margin-bottom: 2%;
}
.form {
width: 60%;
justify-content: center;
margin-bottom: -50px;
}
.form input {
margin-top: 0px;
margin-left: 0px;
}
.submit {
}
When rendering my Signup page, it somehow uses the css from Login.css to show the Submit button. Upon further inspection, it appears the browser is loading ALL of my css files, one by one (in the on the screenshot below). I noticed this by looking at the inspector on the browser itself:
What is happening? I'm not sure why it seems to render all of the styles at once.
This is expected. ESM imports, including CSS via things like webpack are static imports. They will be loaded as soon as the bundle loads, and it doesn't matter if the component you imported it in is loaded or not. Its included because somewhere in your code you import login, as well as signup -- so the CSS imports are resolved in one go.
Css-in-js libs like styled-components do only load the styles if the relevant component is rendered. Static CSS importing is not really css-in-js. Those are globally provided. You might consider those solutions if you want better scoping of styles.
You could also consider CSS modules.
One very easy way to solve this would be to start using Sass and wrap all your CSS for a given page in class names and then within your pages, apply the class name to the outermost div.
To enable Sass support:
npm install sass --save-dev
Then rename your .css files to .scss and update imports.
Login.scss
.login-card {
// all styes specific to login page go here
}
Signup.scss
.signup {
// all styles specific to signup page go here
}
I'm having issues setting an mp4 as my background for a page. I tried importing LoginPage directly into App.js but it didn't work either, my page is blank. Here's my code:
App.js
import React from 'react';
import './App.css';
import Navbar from './components/Navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Home from './components/pages/Home';
function App() {
return (
<>
<Router>
<Navbar/>
<Routes>
<Route path='/' exact component={Home}/>
</Routes>
</Router>
</>
);
}
export default App;
App.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'PT Sans', sans-serif;
}
LoginPage.js
import React from 'react';
import '../App.css';
import './LoginPage.css';
import Extraction from '../img/extraction.mp4';
function LoginPage() {
return (
<div className='login-container'>
<video src={Extraction} autoPlay loop muted />
<h1>Login</h1>
<p>Choose your fighter!</p>
</div>
);
}
export default LoginPage;
LoginPage.css
video {
object-fit: cover;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
}
.login-container {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
object-fit: contain;
}
.login-container > h1 {
color: #fff;
font-size: 100px;
margin-top: -100px;
}
.login-container > p {
margin-top: 8px;
color: #fff;
font-size: 32px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
}
#media screen and (max-width: 960px) {
.login-container > h1 {
font-size: 70px;
margin-top: -150px;
}
}
#media screen and (max-width: 768px) {
.login-container > h1 {
font-size: 50px;
margin-top: -100px;
}
.login-container > p {
font-size: 30px;
}
}
Home.js
import React from 'react';
import '../../App.css';
import LoginPage from '../LoginPage';
function Home() {
return (
<>
<LoginPage />
</>
);
}
export default Home;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Modify your Route to this:
<Route path="/" exact element={<Home />} />
Following this simple tutorial as an intro to Nuxt with a hosted headless CMS.
I got to the end, put my API key into the required file, but I get the error:
Cannot read property 'data' of undefined
at line 21, ie:
const header = PrismicDom.RichText.asText(blog_post.data.blog_post_title);
It's a basic scaffolded Nuxt.js project from scratch, so pretty clean, not much going on here.
No one in the comments seems to have encountered this issue. Any ideas?
(left most of default nuxt.js CSS and combined with the tutorial's, that really shouldn't be the issue though.)
<template>
<section class="blog-post">
<h1 class="title">{{ header }}</h1>
<p class="paragraph">{{ content }}</p>
</section>
</template>
<script>
import Prismic from "prismic-javascript";
import PrismicDom from "prismic-dom" //importing the Dom
import PrismicConfig from "./../prismic.config.js";
export default {
async asyncData() {
const api = await Prismic.getApi(PrismicConfig.apiEndpoint);
let blog_post = {};
const results = await api.query(
Prismic.Predicates.at("document.type", "blog_post"),
{ lang: "en-gb" } //This is a Prismic query option
);
blog_post = results.results[0];
const header = PrismicDom.RichText.asText(blog_post.data.blog_post_title);
const content = PrismicDom.RichText.asText(blog_post.data.blog_post_content);
return {
blog_post,
header,
content
};
}
};
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.blog-post {
margin: 25px 0;
padding: 0 100px;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.title {
font-family:
'Quicksand',
'Source Sans Pro',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
margin: 50px 0;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
p {
color: #000;
margin: 15px 0 5px;
max-width: 450px;
line-height: 1.44;
}
</style>
I have created a library containing some components for use in an Angular 4 application. Functionally, everything works as expected when I use components from the library in an application. The CSS styling from the components is not being applied though.
I compile the library with the Angular compiler (ngc) and have a build step where all templates and styles get inlined. An example of some output in the generated .js bundle:
AppComponent.decorators = [
{ type: Component, args: [{
selector: "app",
styles: ["h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }"],
encapsulation: ViewEncapsulation.None,
template: "<router-outlet></router-outlet>"
},] },
];
As you can see, the styles are inline here using the styles property. The styles that are shown there, are not applied though.
Does anyone know why this happens? I'm kind of clueless about this particular problem. I followed all the guidelines for creating Angular packages in the Angular Package Format.
Edit:
I bootstrap the Angular application with the AppComponent from the example output above as follows:
import { NgModule } from '#angular/core';
import { AppComponent as LibraryAppComponent, AppModule as LibraryAppModule } from '#myscope/library';
#NgModule({
imports: [ LibraryAppModule ],
bootstrap: [ LibraryAppComponent ]
})
export class AppModule {}
Guessing you need :host /deep/. component styles guid
You should remove double quotes from styles and add backquote/acute and your styles will be applied see below:
Instead of this:
styles: ["h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }"]
Replace it with backquote/acute:
styles: [`h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }`]
Button is right below esc key in left key with tilde:~ and acute:`