After playing around with Aurelia for a while, i'm trying to creating a custom component/template. However with below minimal code i still cant seem to show the message that is in testcomponent.html. I see the <testcomponent></testcomponent> in html DOM, however not the message test. What am i doing wrong?
integrationcomponent.html
<template>
<require from="./forms/testcomponent"></require>
<h1>first page</h1>
<testcomponent></testcomponent>
</template>
testcomponent.js
export class TestComponent {
constructor() {
}
}
testcomponent.html
<template>
<p>test</p>
</template>
The classname is TestComponent; this tells Aurelia to look for test-component.html and test-component.js.
I think you can rename the class to 'Testcomponent' as well.
Aurelia is Convention over Configuration so you need to know the conventions.
Aren't there any error messages in the console?
Related
I'm trying to initialise IntersectionObserver in each page of my website built with Nuxt3.
Therefore, I want to access each HTML element that has a specific CSS class. However, on page change, I noticed that via onMounted hook the detected elements are from the previous page.
Here a easy to reproduce example:
app.vue
<template>
<div>
<NuxtPage />
</div>
</template>
pages/index.vue
<script setup lang="ts">
onMounted(() => {
console.group("index.vue");
console.log(document.querySelector("#container"));
console.groupEnd();
});
</script>
<template>
<div id="container">
<h1>INDEX</h1>
<NuxtLink to="/work">
Go to work
</NuxtLink>
</div>
</template>
pages/work.vue
<script setup lang="ts">
onMounted(() => {
console.group("work.vue");
console.log(document.querySelector("#container"));
console.groupEnd();
});
</script>
<template>
<div id="container">
<h1>WORK</h1>
<NuxtLink to="/">
Go to index
</NuxtLink>
</div>
</template>
Simply, the result in the console always come from the previous DOM. Here the steps:
Load the page on index.vue, you see the right element in the console.
Go to work.vue using the link.
See the console showing the exact same result as previously, yet with an added empty class attribute on #container
My question is, why does onMounted hook doesn't show the right DOM on page change?
I tried to set the page transition to the default mode:
definePageMeta({
pageTransition: {
mode: 'default',
},
});
Nothing changed.
NOTE: I am using nuxt version: 3.0.0-rc.9
For this kind of usage, you should use template refs: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
Otherwise, Vue will not behave as expected. More details can be found in this other answer.
I have a component in Vue2 with vue-cli/3 that has a lot of raw HTML. Rather then clutter my component I thought I would abstract it out as a separate module and import it. However when rendering I get the following error:
Vue warn]: Invalid component name: "
<img src="../assets/img/elizabeth_i_article.jpg" alt="Elizabeth the I">
<p>Elizabeth I, bynames <strong>the Virgin Queen</strong> and <strong>Good Queen Bess</strong>, (born September blah blah lot more ...
I see in vue tools that there is a component entry under App with the html as a name and has my value of elizabethTheI : "html here....". Also the image in first line does not render. But all other HTML renders OK.
My setup is
elizabeth_I.js:
const elizabethTheI = `
<img src="../assets/img/elizabeth_i_article.jpg" alt="Elizabeth the I">
<p>Elizabeth
... more html
`
export default elizabethTheI;
Elizabeth_I.vue:
<template>
<div class="container">
<h1>Elizabeth the I</h1>
<div v-html="elizabethTheI"></div>
</div>
</template>
<script>
import elizabethTheI from "./assets/elizabeth_I";
export default {
data() {
return {
elizabethTheI: elizabethTheI
};
}
};
</script>
I have read thru docs and several tutorials and I think I am using v-html directive correctly. Any insight as to why I am getting error and image not rendering would be most appreciated.
I am trying to build a layout using single-file components in Vue.js, with dynamic population and URLs using Vue-router. (I'm using the webpack template via vue-cli as well.)
It works as expected for my app.vue file-- containing the nav, sidebar, page head, and <router-view>-- and the <router-view> content appeared as expected when the correct <router-link> is clicked... until I tried to add subcomponents to the add-load component being called to the <router-view>. Now, nothing appears at all, despite not throwing any errors.
Admittedly, I am not basing my structure on any examples, as I couldn't really find any doing it the way I was hoping to. I wanted to use nested components by calling them like custom elements-- I think this makes the code much easier to read and maintain. I'm not entirely sure how to structure it otherwise, to be honest. Using multiple <router-view>s as siblings to each other seems counterintuitive to me.
I've tried a variety of combinations of how and where to import and call the components, and nothing has worked. The only way I can get any content to load is if I only call a single component for path: '/add-load'. Is it just impossible to use multiple components outside of your base app.vue? I find that hard to believe. Here's what I started with.
From my index.js:
import AddLoad from '#/components/AddLoad'
import AddLoad from '#/components/ProgressSteps'
import Stops from '#/components/Stops'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
},
{
path: '/add-load',
components: {
AddLoad,
ProgressSteps}
}
]
})
From my App.vue file (the multiple component behavior that I'd like to mimic is shown here):
<template>
<div id="app">
<div class="wrapper">
<Sidebar/>
<div class="container-fluid">
<TopNav/>
<MobNav/>
<div class="container-fluid">
<PageHead/>
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
import Sidebar from '#/components/Sidebar'
import TopNav from '#/components/TopNav'
import MobNav from '#/components/MobNav'
import PageHead from '#/components/PageHead'
export default {
name: 'App',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
}
</script>
From my AddLoad.vue file:
<template>
<div class="add-load">
<div class="content-container container-slim">
<progress-steps/>
<router-link to="#stops">Stops</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
import ProgressSteps from '#/components/ProgressSteps'
export default {
name: 'AddLoad',
component: ProgressSteps
}
</script>
Here is a link to a codesandbox, so you can see the full functionality. https://codesandbox.io/s/7k520xk0yq
I am trying to create a faq page on nuxt js.
The template below which I got from veautify does not show up on my localhost. I get these errors instead. It works if I replace v-for "(item,i) in 5" : key="i" as shown in the template source code but I want to pass a list of questions from object(listquestions)into the array from MapState.
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
v-toolbar-logo> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Default> at layouts/default.vue
<Root>
faq.vue file
<template>
<v-expansion-panel>
<v-expansion-panel-content v-for="quest in listquestions" :key="quest.id">
<div slot="header"> Question </div>
<v-card>
<v-card-text class ="grey lighten-3">
This is a test answer.
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</template>
<style>
</style>
<script>
import {mapState, mapGetters, mapActions} from 'vuex'
export default {
computed: mapState({
listquestions:'allQuestions'
})
}
</script>`
questions.js file
export const state = () => ({
list :['Question 1','Question 2','Question 3','Question 4','Question 5'],
allQuestions: state => state.list
})
Accordian template source code which I got from veautify.
https://vuetifyjs.com/components/expansion-panels#example-1
```
You problem seems not caused by the code you paste, by reading the error, is caused by v-toolbar-logo, can you create a jsfiddle?
I'm stuck on a template/component problem and I couldn't find any answer.
I'm trying to move a plain Javascript project to Angular2. In my project, I actually create some elements by inherit from others.
Example:
File header.html
<header class="some_class"></header>
File header_base.html inherits from header.html
<header> <!-- This is the header element from the header.html file. -->
<img class="some_class" src="path/to/my/image">
...
</header>
EDIT:
To clarify how I actually do, to 'inherits file from another', I use Javascript.
My problem is that I can't find out how to do that in Angular.
My question is, is there any way to accomplish something like that or do I need to change my way of 'templating' things ?
Thanks by advance.
Your question is a little confusing. Can you provide more detail about what the end result should be?
It sounds like what you are looking for is shadow dom insertion point where you have a component that you can put content into. Where you have a component called Header that has some markup and styles applied, but then you can use it in different places with different content?
If so, here is how you would do it (Note: this is Typescript but could be done in plain Javascript. Check the Angular docs for examples):
CustomHeader.ts:
#Component({
selector: 'custom-header',
template: '<header class="some-class"><ng-content></ng-content></header>'
})
export class CustomHeader {
//if you need any logic in that component
}
Then in whatever component you need to use this component, you would import it:
app.ts:
import {CustomHeader} from './CustomHeader';
#Component({
selector: "my-app",
directives: [CustomHeader],
template: `<div>
<custom-header>
<img class="some_class" src="path/to/my/image" />
</custom-header>
</div>`
})
The result is that when you use the component in your html, its content will get wrapped by the contents of the CustomHeader's template. Not sure if that is exactly what your need was though.
EDIT: Here's a good article describing this type of component: http://blog.thoughtram.io/angular/2015/03/27/building-a-zippy-component-in-angular-2.html