How can I set different colors for my components in WebStorm?
import Main from './Main'
import Section from './Section'
export default function home(){
return(
<Main>
<Section>
123
</Section>
</Main>
)
}
I want to highlight Main and Section with different colors.
Related
I'm trying to use VueThreeSixty ( https://github.com/rajeevgade/vue-360 ) component in my Vue3 + Vite project.
I imported everything, added VueThreeSixty to my components object, but it looks like I'm still missing something, can u help me figure out what?
[Vue warn]: Component is missing template or render function.
Here's my code.
<template>
<Navigation></Navigation>
<div class="tb_header">
</div>
<div class="container">
<div class="row">
<div class="w-2/5">
<VueThreeSixty
:amount="36"
imagePath="https://scaleflex.cloudimg.io/width/600/q35/https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36"
fileName="chair_{index}.jpg?v1"
/>
</div>
<div class="w-3/5">Sound</div>
</div>
</div> <template>
<script>
import Navigation from "../components/Navigation.vue";
import Footer from "../components/Footer.vue";
import VueThreeSixty from 'vue-360'
import "vue-360/dist/css/style.css";
export default {
data() {},
components: {
Navigation,
Footer,
VueThreeSixty
},
};
</script>
main.js
import { createApp } from 'vue'
import Home from './views/Home.vue'
import Navigation from './components/Navigation.vue'
import Footer from './components/Footer.vue'
import App from './App.vue'
import VueThreeSixty from 'vue-360'
import 'vue-360/dist/css/style.css'
import './main.css'
import './typo.css'
createApp(App)
.use(VueThreeSixty)
.mount('#app')
You should follow the documentation of https://github.com/rajeevgade/vue-360. You need to 'Vue.use' the component first and include tag vue-three-sixty. But it looks like this component does not support Vue 3 yet.
I'm trying to dynamically show a footer/header based on a child view in ionic
I am using the Ionic 4 framework in combination with Vue.js. Tried slots and such having the feeling i'm on the right track but not fully there yet.
I've got a Base.vue (component) which holds
<template>
<ion-app>
<ion-page class="ion-page" main>
<page-header />
<router-view />
<page-footer />
</ion-page>
</ion-app>
</template>
<script>
import PageHeader from '#/components/PageHeader'
import PageFooter from '#/components/PageFooter'
import { mapState } from 'vuex'
export default {
name: 'master',
components: {
PageHeader,
PageFooter,
},
}
</script>
As a child view i've got the following; i know that it's not the right approach to include it inside the <ion-content> but don't know how to set this up in the correct way:
<template>
<ion-content fullscreen>
<page-header>
<ion-toolbar>
<ion-title>
Test
</ion-title>
</ion-toolbar>
</page-header>
<ion-content>
<p>Schedule page</p>
</ion-content>
</ion-content>
</template>
<script>
import PageHeader from '#/components/PageHeader'
export default {
name: 'schedule',
components: {
PageHeader,
},
}
</script>
The header component (which should be dynamic):
<template>
<ion-header>
<slot name="header" />
</ion-header>
</template>
<script>
export default {
name: 'page-header',
}
</script>
What i'm trying to do is making a Base.vue with a dynamic header (PageHeader.vue) so based on a given child view i could change or extend the header if needed.
So I think you're saying you want to change the content of the page header depending on the child.
Components cannot directly affect the templates of other components in the tree. Slots give you some control over this, but it is limited to allowing a component to inject templates into sections of a child component, not the other way around.
Your options are:
Add logic to your parent component which detects what child component is shown and then change the page header accordingly. The page header won't be controlled directly by the child component, though.
Use named views with vue-router.
Use something like portal-vue, but don't go crazy with this kind of power...
I've been trying a bunch of stuff now. I've tried nuxt-leaflet dependency, I've tried writing my own plugin and including it. However, everything keeps ending in the "window is not defined" error.
The map should only be loaded on the client.
My vue component:
<template>
<no-ssr>
<l-map
id="map"
:zoom="zoom"
:min-zoom="3"
:center="center"
>
</l-map>
</no-ssr>
</template>
<script lang="ts">
import Vue from 'vue';
import {latLng, marker} from 'leaflet';
import {ExploreItemType} from '~/components/explore/ExploreItem';
import {Component} from "nuxt-property-decorator";
#Component()
export default class ExplorerMap extends Vue {
url = 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2dydWVuZWJlcmciLCJhIjoiY2puajJ3c3dmMGV1YzNxbDdwZ3Y5MXc0bCJ9.kuHo67NUkzqya1NtSjTYtw';
attribution = 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox';
zoom = 3;
center = latLng(51.505, -0.09);
drawCluster = true;
}
</script>
So I wrote my own plugin in plugins/vue-leaflet.ts
import Vue from 'vue'
import Vue2Leaflet from 'vue2-leaflet'
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster';
Vue.component('l-circle', Vue2Leaflet.LCircle);
Vue.component('l-geo-json', Vue2Leaflet.LGeoJson);
Vue.component('l-icon-default', Vue2Leaflet.LIconDefault);
Vue.component('l-layer-group', Vue2Leaflet.LLayerGroup);
Vue.component('l-map', Vue2Leaflet.LMap);
Vue.component('l-marker', Vue2Leaflet.LMarker);
Vue.component('l-popup', Vue2Leaflet.LPopup);
Vue.component('l-tile-layer', Vue2Leaflet.LTileLayer);
Vue.component('l-tooltip', Vue2Leaflet.LTooltip);
And included it in the nuxt.config.js
{src: "~/plugins/vue-leaflet.ts", ssr: false}
No matter what I've tried, I always end up getting the window is not defined error. I'm out of ideas.
Its because in your component you do
import {latLng, marker} from 'leaflet';
Which probably will do some window check and fail straight away. So you need to import it conditionally with if (process.client) check
Thanks to the hint from Aldarund, I got this to work:
<template>
<div>
<no-ssr>
<l-map
id="map"
:zoom="zoom"
:min-zoom="3"
:center="center"
>
<l-tile-layer :url="url" :attribution="attribution"/>
....
</l-map>
</no-ssr>
</div>
</template>
<script lang="ts">
const isBrowser = typeof window !== 'undefined';
let leaflet;
if (isBrowser) {
leaflet = require('leaflet');
}
import Vue from 'vue';
import {Component, Prop, Watch} from "nuxt-property-decorator";
#Component({})
export default class ExplorerMap extends Vue {
url = 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2dydWVuZWJlcmciLCJhIjoiY2puajJ3c3dmMGV1YzNxbDdwZ3Y5MXc0bCJ9.kuHo67NUkzqya1NtSjTYtw';
attribution = 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox';
zoom = 3;
center;
created() {
if (isBrowser) {
this.center = leaflet.latLng(51.505, -0.09);
}
....
}
I would like to use the Vue single file components with the following constraints:
I have 3 single file components: the main App and 2 subcomponents ComponentA and ComponentB.
I have a normal html page generated by some server side application. Like so:
<html>
<body>
<App>
.. some markup
<ComponentA />
.. some other markup
<ComponentB />
</App>
</body>
</html>
How can I have vue-loader to compile my single file components and instantiate them against the markup in the page without modifying the content of the page aside from, obviously, rendering <ComponentA/> and <ComponentB/>?
I think what you want to do is either add componentA and componentB as a child component of app.
example:
import ComponentA from './componentA.vue';
import ComponentB from './componentB.vue';
export default {
data () {
return {
greeting: 'example'
}
},
components: {
componentA: ComponentA,
componentB, ComponentB
}
}
then in your app.vue html tag
<span> example filler text </span>
<component-a><ComponentA>
<div> example</div>
<component-a><ComponentB>
OR
you may want to add componentA and componentB as a child slot in the app component.
See example:
https://github.com/vuejs/vue/issues/7178
i have been googling around for quite some time now to figure out WHY.. my modal component won't get recognized inside my vieworder.vue component.
I'm receiving :
ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?
type=script&index=0!./src/components/ViewOrder.vue
Module not found: Error: Can't resolve './components/Modal.vue' in
'C:\xxxxxx\xxxxxxxxx\src\components'
ViewOrder.vue - usage of modal :
<template>
<div class="col-sm-10 col-sm-offset-1" v-if="order">
<modal v-if="showModal" #close="showModal = false">
</modal>
</div>
</template>
<script>
import * as types from '../store/mutationtypes'
import { mapGetters, mapActions } from 'vuex'
import Modal from './components/Modal.vue'
export default {
name: 'ViewOrder',
components: {
'modal': Modal
}
....
Modal.vue
<template>
....
</template>
<script>
export default {
name: "modal"
}
</script>
Main.js - Reference :
....
import Modal from './components/Modal.vue'
import ViewOrder from './components/ViewOrder.vue'
....
import Modal from './components/Modal.vue'
Should be import Modal from './Modal.vue'
You're already in the components folder when inside ViewOrder.vue