The project is built on Vue.js on top of Meteor.js. I need to pass a dynamic value from news.vue to layout.vue header_title area (refer layout.vue png).
I have set layout.vue file as the main layout of the app with navigation menu of the app and routing is also handling from layout.vue.
Related screenshots:
index.js
layout.vue
Use props in your Layout.vue
Layout.vue
export default {
props: ['headerTitle'],
// your other stuff here
}
News.vue
<layout :headerTitle="header_title"></layout>
Related
I just want to know how can we let an image take its own height and width using <Image> component in Next.js, instead of defining height and width by ourselves?
Beginning from Next.js v11, you can simply do:
import Image from 'next/image';
import foo from 'path/to/foo.png';
// ...
<Image src={foo} alt="" /> // <-- no need to pass height/width
In the above example, foo will be an object containing src, height, width (and optionally blurDataURL). So, if you want to access them, you can do stuff like foo.height, etc.
Also, there are a few hacks that may interest you:
Use layout="fill" and pass a handler to onLoadingComplete, where you will get naturalWidth and naturalHeight. Then you can set the state to adjust the container accordingly. But this approach is not recommended as it will likely increase CLS.
In data fetching methods [getStaticProps (static generation) / getServerSideProps (SSR)], read your image files and pass their dimensions as a prop to your components. SSR may cause an overhead on your server resources, but that can be minimized significantly by caching.
Simply use your good old img tag. Again not recommended, but will work if your files are already optimized. ESLint may throw some warning depending on your configuration, you would need to disable those rules.
PS: Just check once if your use-case can be handled by layout="fill" (without updating state).
Just a clarification - on older threads on SO, GitHub, etc., you may see an unsized prop being passed to next/image. It was deprecated in Next.js v10, and removed in v11. So, its probably not gonna work for you.
References:
https://nextjs.org/docs/api-reference/next/image
https://nextjs.org/docs/basic-features/data-fetching
https://nextjs.org/docs/going-to-production
Get the width and height of an image in node.js
Next.js build fails using <img> tag
How to use Image component in Next.js with unknown width and height
https://web.dev/cls
https://web.dev/time-to-first-byte
A sample implementation of the second hack:
import fs from "fs";
import path from "path";
import Image from "next/image";
import probe from "probe-image-size";
const IndexPage = ({ mountains }) => (
<Image
src="/mountains.jpg"
height={mountains.height}
width={mountains.width}
alt="Mountains"
/>
);
const getStaticProps = async () => {
const mountains = await probe(
fs.createReadStream(path.join(process.cwd(), "public/mountains.jpg"))
);
return { props: { mountains } };
};
export default IndexPage;
export { getStaticProps };
I'm running into a weird problem. I'm using NextJS for its server-side rendering capabilities and I am using ReactQuill as my rich-text editor. To get around ReactQuill's tie to the DOM, I'm dynamically importing it. However, that presents another problem which is that when I try to access the component where I'm importing ReactQuill via a anchor link is not working but I can access it via manually hit the route. Here is my directories overview,
components/
crud/
BlogCreate.js
pages/
admin/
crud/
blog.js
index.js
blogs/
index.js
In my pages/admin/index.js
...
<li className="list-group-item">
<Link href="/admin/crud/blog">
<a>Create Blog</a>
</Link>
</li>
...
In my pages/admin/crud/blog.js
import BlogCreate from "../../../components/crud/BlogCreate";
...
<div className="col-md-12">
<BlogCreate />
</div>
In my components/crud/BlogCreate.js
import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "../../node_modules/react-quill/dist/quill.snow.css";
...
<div className="form-group">
<ReactQuill
value={body}
placeholder="Write something amazing..."
onChange={handleBody}
/>
</div>
in order to use import "../../node_modules/react-quill/dist/quill.snow.css" in components/crud/BlogCreate.js I use #zeit/next-css and here is my next.config.js
const withCSS = require("#zeit/next-css");
module.exports = withCSS({
publicRuntimeConfig: {
...
}
});
Problem
when I click the Create Blog it should be redirect me http://localhost:3000/admin/crud/blog but it just freeze.
But if I manually hit http://localhost:3000/admin/crud/blog then it go to the desire page and work perfect.
And as soon as I manually load that page then Create Blog works. Now I really don't understand where is the problem? Because it show no error that's why I haven't no term to describe my problem that's why I give all the nasty code and directories which I suspect the reason of this error.
It's hard to give you any solution without seeing the entire project(As you mentioned that it shows no error).
You may remove the #zeit/next-css plugin because Next.js 9.3 is Built-in Sass Support for Global Stylesheets. You can use it for css also.
Create a pages/_app.js file if not already present. Then, import the quill.snow.css file:
import "../../node_modules/react-quill/dist/quill.snow.css";
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
If it gives any error then you can create a directory/file to copy-paste the quill.snow.css code in that file.
pages/
_app.js
styles/
quill_style.css
Then import the file in _app.js like,
import "../styles/styles_quill.css";
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
Eventually you can import your custom gobal css here also.
If although the problem remains then provide your git repository. happy coding ✌️
First: remove your #zeit/next-css setup not needed anymore since next.js version 10.
Second: update nex.js to version 10 you could then use regular import on your modules.
import "../../node_modules/react-quill/dist/quill.snow.css";
By the way, I had the same issue with your Nextjs course. ;)
I am using Next.js with Typescript. The margin of the body is default 8px and I want to get it to 0px. When I try to add an external style sheet to my index.tsx file it throws an error that you can only add external stylesheet to _app.tsx. However, even when I try to import in my _app.tsx, it doesn't change the global style of the body. I am using Emotion css for the styling part. Is there a different way to change the style of the body in the index file using global style? Here is my index.tsx code and I have tried adding the global styles using Emotion CSS as well but it doesn't work.
class Index extends React.Component {
render() {
return (
<div className='body'>
<Container>
<style jsx global>{`
.body:global() {
margin: 0px;
}
`}</style>
<NavBar />
</Container>
</div>
);
}
}
You need some global styles (<style jsx global>) to style the body element or provide css resets.
Example:
import Link from "next/link";
export default () => (
<div>
<style jsx global>{`
body {
background-color: red;
}
`}</style>
Hello, One!
<Link href="/two">
<a>Go to two</a>
</Link>
</div>
);
Code Sandbox
You can have global styles using emotion with Next.js
In your _app.tsx file, you must to
import { Global, css } from '#emotion/core'
return (
<>
<Global styles={css` /* styles */ `}/>
<Component {...pageProps} />
</>
You can see how to implement it, here
https://github.com/pabloobandodev/social-media/blob/master/pages/_app.tsx
According to the official docs:
Global CSS cannot be used in files other than your Custom <App> due to its side-effects and ordering problems.
Possible Ways to Fix It
Relocate all Global CSS imports to your pages/_app.js file.
How to do this in your case?
Well, the best way is to use a CSS base, lets take normalize.css for example.
Run yarn add normalize.css or npm i normalize.css, depending on whichever you are using.
Add import 'normalize.css'; in each of the page you want to use the base on. Official Docs.
Well this could seem redundant if you want to use the base in all of your pages. If so, you can, alternatively, create a file page/_app.tsx (any of the extension .js,.jsx,.ts,.tsx will work) and put this in it:
import 'normalize.css';
export { default } from 'next/app';
Note : If your app is running and you just added a custom App, you'll need to restart the development server. Only required if pages/_app.tsx didn't exist before.
No need to worry about other caveats mentioned in the docs as we are simply re-exporting App without any modification.
There are many CSS bases available choose any that seems best for you.
If you want to add custom global styles, then follow this:
Create a file styles/globals.css (.scss,.sass,etc. will also work if you have configured Next.js properly) and put your styles in that file.
Now add an import in pages/_app.tsx.
import '../styles/globals.css'; // change extension from `.css` to
// whatever you created above
export { default } from 'next/app';
If you have already created a module path alias for ../styles, then you might wanna change the styles import statement (probably to something like import '#styles/globals.css').
Also, if you are using less/sass/scss and want to use a base at the same time along with your custom global styles you simply need to use an import statement in your stylesheet (no need to import the base in _app.tsx if imported in the global stylesheet). An example:
// file: styles/globals.scss
#import '../node_modules/normalize.css/normalize.css';
// your styles...
body {
color: red;
}
// file: pages/_app.tsx
import '#styles/globals.scss';
export { default } from 'next/app';
Moreover, in your case it has not worked most probably because you were styling .body instead of body. It is likely that margin was present in the body, not your div.body.
This is how your _app.js, _app.tsx should look like; styles.css may have your CSS to reset the default browser properties, you can try adding other stylesheets here.
import '../styles/styles.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
I'm using the following components:
react v.16.5
react-redux v.6.0
ag-grid v.18.1
I'm using cellRendererFramework to display a custom component in one cell of ag-grid. However as soon as i make this custom component a connected component,
Error:
Could not find "store" in the context of "Connect(TestComponent)". Either wrap the root component in a , or pass a custom React
context provider to and the corresponding React context
consumer to Connect(TestComponent) in connect options.
the colDef in the ag-grid is as follows:
{
field: "TestField",
headerName: "Test Field",
rowGroup: false,
cellRendererFramework: TestComponent
}
// TestComponent.js
import React, {Component} from 'react';
import {connect} from 'react-redux';
class TestComponent extends Component {
render() {
return(<div>Hello</div>);
}
}
export default connect()(TestComponent);
I've created the store and defined the provider at the Index.js level.
Is it that cellrendererFrameworks cannot be connected?
I came across this issue in another stack overflow post but there they'd said this issue has been resolved in react vers. 13?
https://github.com/ag-grid/ag-grid-react/issues/88
Please note this is not for writing a testcase- i need the TestComponent to actually be connected.
Please could someone help with this as it seems a pretty fundamental bug that nested components are getting blocked from being connected.
From the docs and lilbumbleber's response:
With React 16 Portals were introduced and these are the preferred way to create React components dynamically. If you wish to try use this feature you'll need to enable it as follows:
// Grid Definition
<AgGridReact
reactNext={true}
...other bindings
If you use connect to use Redux, or if you're using a Higher Order Component to wrap the React component at all, you'll also need to ensure the grid can get access to the newly created component. To do this you need to ensure forwardRef is set:
export default connect(
(state) => {
return {
currencySymbol: state.currencySymbol,
exchangeRate: state.exchangeRate
}
},
null,
null,
{ forwardRef: true } // must be supplied for react/redux when using GridOptions.reactNext
)(PriceRenderer);
So, you could try adding those two:
Add reactNext={true} to <AgGridReact/> component
Change
connect()(TestComponent);
to
connect(null, null, null, { forwardRef: true })(TestComponent);
Edit: This bug was fixed in version 20.x
i try to build an Cordova/Phonegap application using vue.js and the Framework7.
I find out how to use functions like "onClick" using the "v-on:click="OnClick" attribute in an html element. Framework7 has jquery already implemented in the dom.
But there is one question. How can i access the dom directly, so that i can select whole css classes with the jquery selector. Like:
$('.likeButton'). ?
In the offical framework7 i found something like this to access the dom with its functions:
this.$$ or this.Dom7
This is what i have already written down in the home.vue file:
<script>
//import Fonts-awesome Icons
import FontAwesomeIcon from '#fortawesome/vue-fontawesome'
import {} from '#fortawesome/fontawesome-free-solid'
import F7Icon from "framework7-vue/src/components/icon";
import F7PageContent from "framework7-vue/src/components/page-content";
import * as Framework7 from "framework7";
export default {
name: 'FAExample',
components: {
F7PageContent,
F7Icon,
FontAwesomeIcon
},
methods: {
clickit: function () {
console.log("hi");
//this is what i have tested, looking if i have access to dom
let $$ = this.$$;
console.log($$);
},
//this is what i want to use
$('.likebutton').on('click',function () {
})
}
}
</script>
Did any of you have an idea how this works?
I hope you can help me. I'm new with vue.js in combination with the framework7.
Thank's for your help :)
We can use all the DOM functions just like
this.$$('.classname)
for example, if you want to hide something by jquery you can use as:
this.$$('.classname).hide()
To check all the DOM functions you can check the official documentation.
https://framework7.io/docs/dom7.html
But make sure that your DOM function should not in any Window function.
If you get the error to implemented it, just make the 'this' instance first.
Just like:
var self=this; // a global variable with this instance
use
self.$$('.classname).hide()
for any framework7 help, just ping me on skyp: sagardhiman5_1
Have you tried using Vue's $refs? You can set a reference to a specific DOM element and then access that in Vue.
A simple example:
<template>
<div class="some-item" ref="itemRef">Some item</div>
</template>
Then in the component:
var myItem = this.$refs.myItem;
// do what you want with that DOM item...
You can also access $refs from the parent. The example in the link below gives details on that.
More on $refs: https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs