Vuejs Single-file-component not Rendered in Page - javascript

No errors in browser, Webpack compiles successfully, but the "hello from dashboard" doesn't show up in the page.
I'm using Vue v2.6
main.js
import Vue from 'vue'
Vue.component('dashboard', require('#comp/dashboard.vue').default);
const app = require('#/App.vue').default; // this app component works fine
import "./css/app.css"
new Vue({
render: h => h(app) // this app component works fine
}).$mount('#app')
dashboard.vue
<template>
<div>
Hello from dashboard
</div>
</template>
<script>
export default {
name: "dashboard"
}
</script>
index.html
<body>
<div id="app">
<dashboard></dashboard>
</div>
</body>
This is the rendered HTML from the browser, However, "hello from dashboard" is not there :(
<body>
<div id="app">
<dashboard></dashboard>
</div>
</body>

You have the root file "App.vue" mounted in the div id = "app", so the "dashboard" needs to be added to App.vue to see its contents.
// App.vue
<template>
<dashboard />
</template>
<script>
export default {};
</script>
<style scoped></style>
In this code, you have connected a component globally, which will be available in App.vue or another child component
Vue.component('dashboard', require('#comp/dashboard.vue').default);

I assume its the path you are missing so i added a / before comp. Because you stated the App.vue works.
Vue.component('dashboard', require('#/comp/dashboard.vue').default);

Related

Template content is not being injected into slot

I'm trying to use slots to inject content from a parent component to its child, but Vue keeps rendering the default content, not parsing the content sent from its parent.
This is the code of the parent component, which in turn is a child of a global component:
let parentComponent = {
template: `
<div>
<child-component>
<template v-slot:action>Close</template>
<template v-slot:element>Modal</template>
</child-component>
</div>
`,
components: {
'child-component': childComponent
}
};
And here is its child component, where I want to pass content:
let childComponent = {
template: `
<button>
<slot name="action">Open</slot>
<slot name="element">Window</slot>
</button>
`,
};
The button is still displaying the default content: "Open Window"
What am I doing wrong?
EDIT:
This is the rest of the content, just in case it helps:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueJS</title>
</head>
<body>
<div id="app">
<vue-directives></vue-directives>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="components/slotDirective/slotDirectiveSubcomponent.js"></script>
<script src="components/slotDirective/slotDirective.js"></script>
<script src="components/VueDirectives.js"></script>
<script>
let vue = new Vue({
el: '#app'
});
</script>
</body>
</html>
And VueDirectives.js:
Vue.component('vue-directives', {
template: `
<div>
<h3>{{ title }}</h3>
<parentComponent/>
</div>
`,
data() {
return {
title: "VueJS directives",
}
},
components: {
parentComponent
}
});
I fixed the error. I don't know the reason, but it wasn't working either if I loaded Vue.js from a CDN, or if I manually downloaded it locally, as a single file.
Then I finally tried installing it from npm, and loading Vue.js in node_modules/vue/dist/vue.js, and this way it works. I assume otherwise Vue.js does not comply with all its functionality.
I'm not sure that slots are designed for this. If you are just changing the text of a button passing props into the parentComponent is how i would go about it. E.g.
<parentComponent buttonText="some text or bind with a data value or computed prop"/>
see: https://v2.vuejs.org/v2/guide/components-props.html
Using slots... If you are experimenting try this, a reusable dialog box that you can pop in anywhere and control the content. E.g.
// myDialog
<v-dialog>
<slot>Here you can put what you want</slot>
</v-dialog>
And to use:
<myDialog>
<template>
<myContent /> Or just put content here without another component
</template>
</myDialog>

Nuxt: Unexpected token <

I am working on a nuxt project, and I'm trying to build a map component using google maps and the plugin https://www.npmjs.com/package/vue2-google-maps. I have installed the plugin using npm
In my index.html page I have a normally working page that looks like:
<template>
<div>
<br>
<br>
<Card/>
<br>
<br>
<br>
<br>
<!-- <Googlemap/> -->
<Panel/>
<Four/>
</div>
</template>
<script>
import Panel from '~/components/panel.vue'
import Card from '~/components/detailCard.vue'
// import GoogleMap from '~/components/googleMap.vue'
export default {
components: {
Panel,
Card,
// GoogleMap
}
}
</script>
When I Uncomment the 3 lines with Googlemap in them I get the error in the screenshot .
The Googlemap component is:
<template>
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
#click="center=m.position"
/>
</GmapMap>
</template>
<script>
import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";
Vue.use(VueGoogleMaps, {
load: {
key: "MYTOKEN",
libraries: "places"
}
});
export default {
}
</script>
<style>
</style>
What am I doing wrong?
edit:
Most likely you are missed transpile
https://github.com/xkjyeah/vue-google-maps/blob/0985d475496083f2459db2960ba8f9317aab50ef/README.md#nuxtjs-config
transpile: [/^vue2-google-maps($|\/)/]
Often it refers to the response from a request, where it was expecting a JSON object, but instead is returned HTML. The < refers to the first character in <!DOCTYPE... or similar.
Check the responses coming back from the APIs or other services you’re using.
Updating from Node 12x to Node 14x worked for me

How to Set an Image as Background in Next.js?

I have two components:
LoginLayout which should is high order comp for Login component
Login component is page
I need to make the login page have an image as the background.
I tried achieving this through CSS and it does not work.
Here is LoginLayout comp:
export default ({ children, title }) => (
// I tried to add background: url(.../img)) to this login-layout class
<div className="login-layout">
<Head>
<title>Login to Tex</title>
</Head>
<div className="login-wrapper">{children}</div>
</div>
);
How can this be achieved in Next.js?
Make sure you have your CSS attached to your component, as #Deano mentioned.
import './style.css';
If you use CSS modules import like this instead:
import styles from './MyStyles.module.css';
export default ({ children, title }) => (
<div className={styles.loginLayout}>
<Head>
<title>Login to Tex</title>
</Head>
<div className={styles.Login-wrapper}>{children}</div>
</div>
);

Materialize Css Parallex is not a function

I am trying to use the parallax within a react component. I have gotten this to work in the past. This is a MeteorJs project as well
I get a console error:
$(...).parallax is not a function
My component:
import React from 'react';
import $ from 'jquery';
export default class Index extends React.Component{
render(){
$(document).ready(function(){
$('.parallax').parallax();
});
return(
<div className="container">
<div className="parallax-container">
<div className="parallax"><img src="images/parallax1.jpg"/></div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background
content or image in this case, is moved at a different speed than the foreground content while
scrolling.</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src="images/parallax2.jpg"/></div>
</div>
</div>
)
}
}
My client main.js file:
import '../imports/startup/client/routes';
import '../node_modules/materialize-css/dist/js/materialize.min';
import '../node_modules/materialize-css/js/parallax';
The error message is telling you that .parallax() isn't a function in this line of code:
``
$('.parallax').parallax();
```
Which means that $('.parallax') is returning an object (usually a html element). It is not surprising that .parallax() is not a function, because it's just a html element.
Looking at the documentation, I think you are missing this initialisation code:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.parallax');
var instances = M.Parallax.init(elems, options); });

Nested components in app.vue not pulling content through

main.js file:
import Vue from 'vue'
import App from './App.vue'
import Parent from './assets/components/frame/Parent.vue';
import LeftSide from './assets/components/frame/LeftSide.vue';
import RightSide from './assets/components/frame/RightSide.vue';
import HeaderLeft from './assets/components/header/HeaderLeft.vue';
import HeaderRight from './assets/components/header/HeaderRight.vue';
Vue.component('Parent', Parent);
Vue.component('LeftSide', LeftSide);
Vue.component('RightSide', RightSide);
Vue.component('HeaderLeft', HeaderLeft);
Vue.component('HeaderRight', HeaderRight);
new Vue({
el: '#app',
render: h => h(App)
})
Non working app.vue file, no data appears on web page. When examining the page via dev tools, the parent div is there, but it's empty. I'm expecting the LeftSide and RightSide to be nested inside of it.
<template>
<div>
<Parent>
<LeftSide>
</LeftSide>
<RightSide>
</RightSide>
</Parent>
</div>
</template>
<script>
</script>
<style>
</style>
When modified to the below (exclude 'Parent'), to have no nested components, the data (left side and right side) outputs to the web page fine.
<template>
<div>
<LeftSide>
</LeftSide>
<RightSide>
</RightSide>
</div>
</template>
<script>
</script>
<style>
</style>
Parent component below
<template>
<div class="parent">
</div>
</template>
<script>
</script>
<style>
.parent
{
display: flex;
}
</style>
I fixed it by moving LeftSide and RightSide into the Parent.vue, instead of having the LeftSide and RightSide inside the Parent in the app.vue.
As you already figured out yourself you should move those components into the Parent component.
But there are situations where you want to have a reusable component as decorator (something like a panel) and place elements inside of it. In this case you are looking for slots. Using slot you can indeed write this:
<Parent>
<LeftSide />
<RightSide />
</Parent>
And in the Parent component you would need to define where those components have to be placed using <slot></slot>
<template>
<div class="parent">
<slot></slot>
</div>
</template>
<script>
</script>
<style>
.parent
{
display: flex;
}
</style>

Categories