Is there any way to hide vue props in page-source? - vue.js

i'm using vue single component and passing props inside my blade fie...!
is there any way that i can hide props when viewing page-source ?
here is my output from page-source in chrome!
<my-component name="name" :brand="user_id":1,"created_at":null,"updated_at":null}" ></my-component>
i know that i can use spa but i want to know if there is any way that we hide theme when viewing page-source?!

Related

Use a function defined in a siblings child component in Vue

So have a a MainLauyout.vue file
In that file I have a Toolbar component and a content component like so
<!--MainLayout.Vue-->
<Toolbar />
<Content></Content>
Within Content component I have a search bar with #input
Within the Content component
I have a router-view that displays another vue.
Within that vue, I have a table with a search function defined.
I was wondering how its possible to put that function in the #input that is in the Toolbar component. From what I was able to search they say to use refs but I'm not sure how to get that to work with my layout structure. Can anyone let me know the best way to do this?

Vue component communication between header component and components in the router-view

Im facing a problem for my VUE app, Im using the vue Router to navigate to my component
In my Header component I use router-link to navigate to a Home component
The problem is :
In my Header component I would like a checkBox (a boolean variable) that change the content of my Home component (rendered in the router-view) like a v-if that would check the boolean variable in the Header
Here is my App.vue template I was trying to solve the problem through emits but Im Kinda stuck for passing data inside a component (inside the router-view)
<template>
<div class="content">
<HeaderComponent #eventCheckBox="handleCheckBox" />
<router-view />
<FooterComponent />
</div>
Do you guys have already faced this issue, is there a way to do it the classic way or should I try plugins like Portal or Teleport ?
Portal and Teleport are the same, just a different name (teleport in Vue3, being the official name).
As of the rest of the question, this explains it very well: https://stackoverflow.com/a/49702934/8816585
Mainly, you need to see if you need to use a store like Pinia (recommended one) and Vuex. Most of the time, you could use a parent/child relationship. Here is another article explaining when you would need something like that: https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/#alternatives-to-storing-data-in-vuex
In Vue3, you could even not use a store and rely solely on the singleton pattern + composables (again, a lot of articles are available for that one).
TLDR: use your Vue devtools and inspect the state flowing.
If you need more, reach for more powerful tools.

Disable template layout, load component only - vue js

I want to hide rest of the template, just want to view my component. How can I do that? Is there any way to disable the parent layout in vue js?
That's how I have set the route

I want to change Vue components with media Queries

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;}

How to use v-bind without showing all the properties as HTML attributes?

The standard way of passing properties to a component is to use the v-bind directive:
<Child :prop1="myObj.prop1" :prop2="myObj.prop2" :prop3="myObj.prop3"/>
But Vue makes it possible to simply pass the entire object:
<Child v-bind="myObj"/>
However, one downside I've come across is that the HTML element shows all these properties:
<div class="child" prop1="[Object object]" prop2="2" prop3="[1,2,3]">...<div/>
Is there a way to prevent this behaviour?
There is a way to avoid this without passing props explicitly:
https://v2.vuejs.org/v2/guide/components-props.html#Non-Prop-Attributes
add inheritAttrs: false to the component you are passing props to
After reading documentation on component props look's like vueJs does not provided such provision to avoid this. https://v2.vuejs.org/v2/guide/components-props.html