Can someone help me how fix this warning?
When I load the page I get this warning in console:
App.vue
<template>
<Navbar />
<Doodle />
<div class="container text-light cat-head">
<router-view />
</div>
</template>
<script>
import Navbar from "#/components/Navbar";
import Doodle from "#/components/Doodle";
export default {
components: { Navbar, Doodle },
};
</script>
Related
When i run locally (even with yarn start in prod mode), my translations work correctly. However, after i deploy my project to AWS Amplify, this specific /dashboard page is not working the translations (no error messages at all in console.log, nothing).
I have the following structure:
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { UserHome } from '~/templates'
export default function Dashboard() {
return <UserHome />
}
export async function getServerSideProps({ locale }: { locale: string }) {
const res = await serverSideTranslations(locale, ['common'])
return {
props: {
...res
}
}
}
This leads to UserHome template. Now the following:
import { useTranslation } from 'next-i18next'
import Image from 'next/image'
import { PageHeader, TableCampaign } from '~/components'
import { tableData } from '~/components/TableCampaign/mock'
import Base from '../Base'
import styles from './user-home.module.css'
const UserHome = () => {
const { t } = useTranslation('common')
return (
<Base>
<PageHeader image="/img/computer.svg" title={t('tableCampaign.title')}>
<div className={styles.header__legends}>
<div className={styles.header__infos}>
<div className={styles.header__legend}>
<div
className={`${styles.header__circle} ${styles.header__circle__success}`}
></div>
<p className={styles.header__state}>
{t('tableCampaign.active')}
</p>
</div>
<div className={`${styles.header__legend} mt-2`}>
<Image
src="/icon/eye.svg"
alt="Eye icon"
className="mr-2"
width={24}
height={24}
/>
<p className={styles.header__state}>{t('tableCampaign.view')}</p>
</div>
</div>
<div className={`${styles.header__infos} mx-6`}>
<div className={styles.header__legend}>
<div
className={`${styles.header__circle} ${styles.header__circle__warning}`}
></div>
<p className={styles.header__state}>
{t('tableCampaign.pending')}
</p>
</div>
<div className={`${styles.header__legend} mt-2`}>
<Image
src="/icon/edit.svg"
alt="Pen icon"
className="mr-2"
width={24}
height={24}
/>
<p className={styles.header__state}>{t('tableCampaign.edit')}</p>
</div>
</div>
<div className={styles.header__infos}>
<div className={styles.header__legend}>
<div
className={`${styles.header__circle} ${styles.header__circle__danger}`}
></div>
<p className={styles.header__state}>
{t('tableCampaign.finished')}
</p>
</div>
<div className={`${styles.header__legend} mt-2`}>
<Image
src="/icon/download.svg"
alt="Download icon"
className="mr-2"
width={24}
height={24}
/>
<p className={styles.header__state}>
{t('tableCampaign.download')}
</p>
</div>
</div>
</div>
</PageHeader>
<TableCampaign tableList={tableData} />
</Base>
)
}
export default UserHome
The translations of UserHome and Base component, and the components inside Base are not working. The other pages are working correctly. Do you guys have any idea?
How to make the selected div element to be 100% in the inspect element tool in the picture below. I am using display:flex on .dvPageNotFound class and I want to apply height:100% on the div element inside it. If we put display:flex on parent element then all the child elements gets stretched by default, but here I don't get my child element stretched. I don't know why? I am using 12 column grid system same as bootstrap 4 grid Any help would be appreciated.
HERE IS THE CODE -
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex">
<div class='col-12'>
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
This worked for me. I added height: 100vh and added m-auto classes which we get from the 12 column grid.
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
<div className="m-auto">
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
I am trying to create a new website and I want to add a 3d model from spline,
I added it but it takes some time to load so I decided to add a loader/Spinner but I did not know how to check if the 3d model is loaded or not.
this is my component
import React from "react";
import styles from "../styles/Home.module.css";
import Spline from "#splinetool/react-spline";
import NavBar from "./NavBar";
function WelcomeComp() {
return (
<div className={styles.Welcome}>
<div className="sticky top-4">
<NavBar />
</div>
<div className="flex flex-row h-screen">
<div className="flex flex-col items-start justify-center">
<p className={styles.WelcomeLine1}>Hi, My name is Abdallah Zaher</p>
<p className={styles.WelcomeLine2}>Iam a Front-end developer </p>
</div>
<div className="w-1/2">
<Spline scene="https://prod.spline.design/-----/scene.splinecode" />
</div>
</div>
</div>
);
}
export default WelcomeComp;
and here I want to make the if condition if the model is loaded show the component else show the spinner
import WelcomeComp from "../components/WelcomeComp";
import styles from "../styles/Home.module.css";
export default function Home() {
return (
<div className={styles.container}>
<WelcomeComp />
<div className={styles.loader}></div>
</div>
);
}
Spline component supports onLoad prop, so your Spline implementation should look something like this:
<Spline
onLoad={()=>setLoading(false)}
scene="https://prod.spline.design/-----/scene.splinecode"
/>
To keep it simple, I recommend having the Spline component and the Loader/Spinner component together in one scope, so Spline can easily change the loading state and also the loader can easily react to it. This is one of the possible ways how to implement it:
import React,{ useState } from "react";
import styles from "../styles/Home.module.css";
import Spline from "#splinetool/react-spline";
import NavBar from "./NavBar";
function WelcomeComp() {
const [loading, setLoading] = useState(true)
return (
<>
{loading && <div className={styles.loader}></div> } //if loading, show loader
<div className={styles.Welcome}>
<div className="sticky top-4">
<NavBar />
</div>
<div className="flex flex-row h-screen">
<div className="flex flex-col items-start justify-center">
<p className={styles.WelcomeLine1}>Hi, My name is Abdallah Zaher</p>
<p className={styles.WelcomeLine2}>Iam a Front-end developer </p>
</div>
<div className="w-1/2">
<Spline
onLoad={()=>setLoading(false)}
scene="https://prod.spline.design/-----/scene.splinecode"
/>
</div>
</div>
</div>
</>
);
}
export default WelcomeComp;
And of course, delete the loader div from the Home component.
I am trying to use the Bootstrap 5 Offcanvas component with Nuxt3. I have the offcanvas working, but does anyone know why the dark "backdrop" is not shown? The example I am trying to emulate is here: https://stackblitz.com/edit/bu3k9l?file=index.html
But, my attempt is here (notice the background of the page does not darken like the above example when I open the sidebar/offcanvas component: https://stackblitz.com/edit/nuxt-starter-zqzl4k?file=components/OffCanvas.vue
My OffCanvas.vue code:
<template>
<div
class="offcanvas offcanvas-start"
:class="showMenu ? 'show' : ''"
tabindex="-1"
id="offcanvasExample"
:style="{ visibility: showMenu ? 'visible' : 'hidden' }"
>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">
Offcanvas with backdrop
</h5>
<button
type="button"
class="btn-close text-reset"
#click.prevent="$emit('show-menu')"
></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
</template>
<script setup>
const props = defineProps({
showMenu: {
type: Boolean,
default: false,
},
});
</script>
i use dhtmlxGantt because i need gantt diagram in my project but i have a desplay problem . i use vuejs component that's why i put the code of dhtmlxGantt in my component but the display isn't clear
this is my code :
//Gantt component
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div id="gantt_here">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
created(){
gantt.init("gantt_here");
},
mounted() {
console.log('Component mounted.')
}
}
</script>
<style scoped>
body{
margin: 10px ;
}
</style>
and i call this two file
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet">
please i need help
VueJS is very complicated when it comes to javascript components external to the components, what I can advise you in this case is to do the internal import of the component's library and try to use it, as I never used this component, so I don't know if it uses jQuery, but there are ways to use jQuery in VueJS.
An example of how you would use it would be installing the library using the command npm install --save #types/dhtmlxgantt, and importing it into your component.
<script>
import gantt from '#types/dhtmlxgantt'
export default {
...
created() {
gantt.init("gantt_here");
}
}
</script>