I have a blog and I want to get post content from the server and paste it into a component's template.
I get post data (and also post content) in PostComponent and pass it as a template to dynamic component.
Post content can contain vue directives.
PostComponent.vue:
<template>
...
<component :is="{template: content}"></component>
...
</template>
But styles not applying to content from server.
How can I make it works?
I solved this by removing styles from component scoped styles and added them to scss file.
Related
I want to create a nuxt-link from js and put it in a div
I am not able to add nuxt-link from js. Can someone help me on this.
mounted() {
$(".creator-content .row").append(`
<nuxt-link to="/">GG</nuxt-link>
`)
}
You cannot add references to Vue components by using "vanilla JavaScript" or JQuery operations (unless you use Vue via tag, which isn't possible via Nuxt).
Instead, this should be part of you Vue component's template. You can then load the component conditionally via directives as #kissu described in his comment.
Is there any way to make two different files for HTML and components in Vue.js? Meaning the HTML code is in a different file from the component's code like with Angular.
If your goal isn't to avoid precompilation, you can still use single-file components and split the js and css into different files. They include an example of this structure in the docs.
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
In my App.vue I've set my template like this
<app-header></app-header>
<router-view></router-view>
<app-footer ></app-footer>
app-header sets a header component to every other component of my project (so I don't have to repeat myself). app-footer does the same, but with a common footer for all of my components.
This works perfect with my Desktop web, but for Mobile I would like to change the header component to a new-header.vuecomponent, and I would like to get rid of the Footer when using a mobile device so it doesn't use screenspace.
How can I achieve this? I tried to use app-footer {display: none;} in a media query at App.Vue but its not working.
You do not want to use CSS to hide. The beauty of Vue is that in the case of mobile, the code will not even be generated at all.
Use a v-if directive, and add an isMobile property to your data, computed, store, etc. Or call a method to get it.
<app-footer v-if='!isMobile'></app-footer>
For the header, there are 2 ways. Using a component element with v-bind:is to swap in the correct one, or using v-if and v-else
<app-header v-if='!isMobile'></app-header>
<app-header-mobile v-else></app-header-mobile>
Here is the official link to the Vue dynamic component approach.
https://v2.vuejs.org/v2/guide/components-dynamic-async.html.
It would look like this:
<component v-bind:is="currentHeaderComponent"></component>
In this case, you would set currentHeaderComponent based on your conditions.
If you insist on CSS and media queries for the footer, set the component id or class, and that in your CSS
Component
<app-header id='app-header'></app-header>
<router-view></router-view>
<app-footer id='app-footer'></app-footer>
CSS
#app-footer {display: none;}
Can I have a Vue component where the template is found in an external file (.html)? Can we do the same with the style (.scss)?
This will assist our development where we can have front-end HTML devs work on the HTML and styling and the javascript devs can work on the component logic and behavior.
Is it possible to reference/import a template and style in a vue component?
The answer is yes, but the entry for you component would contain a template, not a script. From Single File Components section of Vue.js docs:
Even if you don’t like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files:
<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
I am trying to develop an application using vue.js2. I am getting some strange texts in source code. You can see those texts in below image.
Could anyone say why it is coming ?
You might be using scoped attribute on styles tag in your .vue files to scope your styling to the component only.
Any styles scoped to a component using the <styles scoped> ... </styles> , the styles will be applied only to the elements in that component only.
So vue-loader which parses the .vue files uses PostCSS behind the scenes to achieve this by add adding those weird and unique data attributes.
See Scoped CSS for more info