I am learning reactjs from gatsby framework where i am trying to change the title of the website by using site.siteMetadata but getting an error as "data is not defined" and also html static pages build failed.
{data.site.siteMetadata.title}
^
error
import React from "react";
import g from "glamorous";
import {css} from "glamour";
import Link from "gatsby-link"
import {rhythm} from "../utils/typography";
const linkstyle=css({float:'right'});
exports.default=
({children})=>
<g.Div margin={'0 auto'}>
maxwidth={700}
padding={rhythm(1.5)}>
<Link to={'/'}>
<g.H3
marginBottom={rhythm(2)}
display={'inline-Block'}
fontStyle={'normal'}>
{data.site.siteMetadata.title}
</g.H3>
</Link>
<Link classname={linkStyle} to={'/about/'}>
About
</Link>
{children()}
</g.Div>
export const query=graphql
'query LayoutQuery{
site{
siteMetadata{
title
}
}
}
##
----------
If you're using gatsby v2 you should follow the tutorial for v2:
https://next.gatsbyjs.org/tutorial/part-four/
The children() isn't valid syntax anymore in Gatsby v2.
Related
My Laravel 9 project uses Vue 2.6 and Vuetify.
As I need to display a Google map, I decided to use vue2-google-maps package. My Google Maps is displaying as blank (though it does take the proper width and height on the page)
This is my app.js file:
import Vue from 'vue'
import vuetify from './plugins/vuetify' // path to vuetify export
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps,{
key:'My_GOOGLE_API_KEY',
libraries: 'places',
})
new Vue({
vuetify,
}).$mount('#app')
The is my blade file
<template>
<div class="map">
<p>Google Map</p>
<gmap-map
:center="{
lat: 47.2736,
lng: 16.0843
}"
:zoom = "7"
style="width:100%; height: 280px;"
>
</gmap-map>
</div>
</template>
Am I doing something wrong? Please advise how to fix the issue or if there is any suggestion to use some-other package.
Thanks.
I'm trying to use mask on Form with Laravel and VueJS using https://vuejs-tips.github.io/vue-the-mask/, I'm new to Vue so I looked for some way to use mask, I ended up finding this lib. However, I do not know how to use the example of the site since it does not show a complete example, just snippets of code.
Displays the second error:
SyntaxError: import declarations may only appear at the top level of a module inscriation: 62: 8
[Vue Warn]: Error compiling template:
[Vue Warn]: Failed to resolve directive: mask
(found in )
I added the code in the blade.php
<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ script>
<script>
// Local Directive
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
</ script>
<template>
<input type = "tel" v-mask = "'##/##/####'" />
</ template>
You can't do import in native (browser) JS, you need to use laravel mix or webpack (or any other bundler)
easiest solution: laravel-mix
npm install laravel-mix --save
then open (or create webpack.mix.js file), and type this (of course you need to specify your own path)
var mix = require('laravel-mix');
mix.js('/resources/path_to_input_javascript', '/public/path_to_resulting_javascript')
In your input file you create simple vue instance (and import your component)
import Vue from 'vue';
import mask from 'path_to_component.vue'
var app = new Vue({
el: "#root", //root element name
components: {'x-mask': mask}
});
and in your component you put the code:
<script>
// Local Directive
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
</script>
<template>
<input type = "tel" v-mask = "'##/##/####'" />
</template>
It's not that complex, once you get used to it. You should read/watch about bundlers.
I'm writing a Vue single page component in my project which is bundled using Laravel Mix. I want to extract some logic out into its own class so that it can be easily re-used across other components (but this isn't logic that should be a Vue component itself).
I made a new class and put it in TimeRangeConverter.js, in the same directory as my Vue component.
export default class TimeRangeConverter {
static getFromTimestamp() {
return 1;
}
}
And in my component, I'm importing it as I think I normally would:
<template>
<div>
Example component
</div>
</template>
<script>
import './TimeRangeConverter';
export default {
mounted() {
console.log(TimeRangeConverter.getToTimestamp());
}
}
</script>
However Vue is throwing an error saying ReferenceError: TimeRangeConverter is not defined.
I'm using the default webpack.mix.js config file that comes with Laravel 5.7:
mix.js('resources/js/app.js', 'public/js');
And in my main app.js file I'm automatically including Vue components with:
const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
What's the correct way to import this class into a Vue component for usage?
You should import your class inside your component code using the following syntax :
import TimeRangeConverter from './TimeRangeConverter';
I have some Vue components (.vue) in my Laravel project, resources\assets\js\components. I want to import the components to a view file .blade.php:
<div id='lol'>
<some-component></some-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script>
import SomeComponent from '.\resources\assets\js\components\some.vue
new Vue({
el: '#lol'
});
</script>
I got error in console: Uncaught SyntaxError: Unexpected identifier at the import
I don't wanna register the component in app.js
If you don't want to use a compiler, you could use a library such as http-vue-loader, which provides a function to do just that.
Important: The author of the library itself does not recommend to use this library for production environments. Instead, he recommends you to compile your .vue files.
When using the http-vue-loader library, your snippet would look like this:
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<div id='lol'>
<some-component></some-component>
</div>
<script>
new Vue({
components: {
'some-component': httpVueLoader('./resources/assets/js/components/some.vue')
},
el: '#lol',
});
</script>
Alternatively, you can compile and export your vue component as a library, which you then can add to your project.
To export your component as a library, you first need to create an entry point for your component, for example: 'resources\assets\js\components\index.js'. In this entry point, you register your components globally.
import Vue from "vue";
import Some from "./some.vue"
const Components = {Some};
Object.keys(Components).forEach(name=>{
Vue.component(name,Components[name])
})
export default Components;
Next, you need to define a build step for building your library in your package.json, which links to the entry point of your component:
"scripts": {
...
"build-bundle" : "vue-cli-service build --target lib --name some ./resources/assets/js/components/index.js",
...
},
Next, call this build step, e.g. by invoking 'yarn build-bundle', or the npm equivalent.
Finally, you can add the compiled component to your webpage. Note, that you don't need to explicitly include your component, since you registered it globally before. Also note that you need to add the type="module" attribute to the script tage, because otherwise you cannot use the import statement. Finally, the outpath of the compiled libraries is the one that is used in your vue.config.js.
<div id='lol'>
<some-component></some-component>
</div>
<script type="module">
import "/<path>/<to>/<compiled>/<library>/some.umd.min.js";
const app = new Vue({
el: '#lol',
})
</script>
I have a react component in a file named ts.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Ts extends React.Component {
constructor(props) {
super(props);
var expected = {
lowercase:'Onlylowercase',
snakeCase:'justSnakeCase',
ProperCase: 'AndProperCase'
};
console.log("expected:",expected);
console.log("props:",props);
console.log("this.props",this.props);
console.log("props.lowercase",props.lowercase);
this.state={'lowercase':this.props.lowercase};
};
render() {
return NULL;
}
}
if (document.getElementById('ts')) {
ReactDOM.render(<Ts />, document.getElementById('ts'));
}
I also have a html page from where this is called:
<html>
<head>
<title>My TS</title>
</head>
<body>
<Ts lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase">
</Ts>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
My issue is I can't get the values lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase" recognised as props in the constructor. I need to pass in some stuff from the html to populate the initial state of the component.
When I open the HTML with Chrome console open I get:
expected: {lowercase: "Onlylowercase", snakeCase: "justSnakeCase", ProperCase: "AndProperCase"}
props: {}
__proto__: Object
or it is this.props?: {}
__proto__: Object
props.lowercase undefined
this.props.lowercase undefined
undefined
undefined
I am expecting props to be a javascript object with properties of lowercase, snakeCase and ProperCase, like the var expected.
I don't think I need to use componentWillReceiveProps - as I am trying to follow the pattern describe in the documentation here:
https://reactjs.org/docs/react-component.html#constructor
and pass in props as html attributes as described here:
https://reactjs.org/docs/components-and-props.html
I have excluded from this post the detail of the node modules and javascript includes - as the Ts component's constructor is being called which demonstrates the Ts class is "there" and my npm config is OK - it is including react and other required modules. The {{ asset() }} function is a Laravel function. The html is part of a blade template in a Laravel app.
Can anyone see what I am doing wrongly?
Your syntax is wrong. React doesn't creat a new html tag like "". You only can use tag in react component. So the right syntax is in html replace
<Ts lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase">
</Ts>
To <div id="ts"></div>
and go add to before
<script>
var lowercase="whatever";
var snakeCase="snakeCase";
...
</script>
And change to
if (document.getElementById('ts')) {
ReactDOM.render(<Ts lowercase={lowercase} snakeCase={snakeCase} />, document.getElementById('ts'));
}
ReactDOM will find a dom with id is "ts" and replace it by your ts component.