Nativescript vue slot default component issue - javascript

I was trying to create an mobile application with nativescript-vue and faced a problem with default component rendering while using slots.
So there is App.vue with Frame and inner slot.
<Frame ~mainContent>
<slot name="mainContent"></slot>
</Frame>
Also there is a router with available components:
import EducationPlacesList from './components/EducationPlacesList'
import PersonalProfile from './components/PersonalProfile'
const router = {
EducationPlacesList: EducationPlacesList,
PersonalProfile: PersonalProfile
}
And as Vue router is currently not supported for nativescript vue there is a solution for navigating through manual routing and it works just fine. I have a sidebar with labels and ontap there is a
this.$navigateTo(this.$router[to], options) - which perfectly redirects me by tapping.
But if i start my application and do not tap any of links there will be an empty space as expected. Because slot is empty until navigation to some page. I wonder, is there a good practice, how to set the default component for this slot.

Related

Vue.js duplicate a component twice in the screen : How to avoid this problem?

I created Vue app in VS code. When I try to run the app, the home component is rendered twice in the screen.
Here is the resulted homepage screen screenshot:
Here is the Home.vue code:
The Home component must be referenced twice. For example in App.vue or some other component you’re using.

Is it possible to load screen into Tabs using Vue-router?

I have a setup where I have a routes file and multiple routes setup e.g: localhost:8000/test & localhost:8000/test2
My goal is to have a final route for example localhost:8000/tabs where I use some sort of Tab import for example bootstrap or Vuetify to crease tabs for each route within the page.
For example: localhost:8000/tabs?=test&test2 would render a page where the components test and test2 are the tab items. (Components themselves Dynamically retrieved using the routes file?).
The main problem with routes I am facing is that it reloads the page/changes the URL of the page instead of staying within localhost:8000/tabs.
Thanks for any advice.
Yes, you can using the <router-view /> and child routes.
Read more here

React production build styling not loading on refresh

I have a single page React website. Everything works fine in development mode. When I build it and run from the build folder, I encounter this one error:
If I visit any page, everything loads fine. However when I refresh the page, the styling doesn't get applied to certain aspects of the page.
Here is an example view file:
// Dependencies
import React from 'react';
...
// Style
import '../Styles/Landing.css';
...
// Images
import image from '../Images/landing/image.jpg';
// View
export default () => (
<div className="landing-page">
...
</div>
);
I'm new to React, and re-working an existing site, learning as I go. Is there a reason why the styling bugs out on refresh?
Any help would be deeply appreciated!

Add p5js to Ember application

I'm trying to incorporate the p5js javascript library into my Ember.js app. I want the following p5js example to appear on the template:
https://p5js.org/examples/sound-record-save-audio.html
I've included the cdn script in my index.html file:
I dont know how/where in the Ember run loop to put the javascript so it runs and loads when the page loads
I would suggest making a component, putting the component in whatever template you're rendering (could be application.hbs if you only have one page) and putting the Javascript into the component's didInsertElement method.
Along with that, I would place the p5 canvas inside your component's own Element, so that the component behaves normally (it's weird for a component to render things outside its own Element, and you'd want them to be cleaned up properly if you navigate away to some other template). The p5 docs say how to position the canvas.
In your component it would look like:
export default Component.extend({
didInsertElement() {
createCanvas(400,400);
canvas.parent(this.element);
background(200);
fill(0);
text('Enable mic and click the mouse to begin recording', 20, 20);
...etc...
}
})
```
This answer applies for Ember app versions 1.13 onward and was written as of 3.x. Versions of Ember < 3.x will need to use the older import syntax in the component boilerplate.
The most common place for code that should run after a page loads is the didInsertElement hook:
import Component from '#ember/component';
export default Component.extend({
didInsertElement() {
this._super(...arguments);
console.log(p5) // this should print a function to the console
}
});
Also check out didRender, which might be a better fit for your use case.
You can read more about the uses of different component lifecycle hooks in The Guides

Vue.js modify other component's style

I am using Webpack with Vue.js to create a large-scale web app. The problem I encounter is the following:
I've am using vue-router and the following structure for the main app template:
<customNav></customNav>
<router-view></router-view>
The navigation is a single file component that has its own styles defined inside the component file. Let's say it has a black background by default. Now, on single occasions (when showing different views through the router), I want it to be transparent.
I thought I might just overwrite the CSS in the router view component, but this doesn't work because Webpack is bundling all the CSS of components I import, and I have to import all the components in the main.js to define them in the router. Therefore, overwriting the style in a component leads to it being the global default, even if the component is not even used.
How would I solve this problem?
You can take help of dynamic styling of VueJS. You can assign a class, based on the value of a variable. So in your customNav You can have two classes: say black-bg and transp-bg and you can change this will help of a variable: blackBackground
<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>
I think you can change this variable in two ways:
Have this as an instance data and change it based on current route.
Have this in vuex state and change in different components based on your requirement.

Categories