Im trying to use this library: https://github.com/rigor789/vue-scrollto
But Im having trouble using it and the instructions are not very helpful to me. it says I should do this:
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
But I have no idea where to do this. So I have tried just using it like this:
<template>
<div>
<Navbar/>
<Cover/>
<button class="btn btn-primary" v-scroll-to="'#about'">Hallo</button>
<Offers/>
<AboutUs id="about"/>
<Info/>
</div>
</template>
<script>
import Navbar from '#/components/Navbar'
import Cover from '#/components/main/Cover'
import Offers from '#/components/main/Offer/Offers'
import AboutUs from '#/components/main/AboutUs'
import Info from '#/components/main/Info'
import Menu from '#/components/main/menu/Menu'
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
export default {
components: {
Navbar,
Cover,
Offers,
AboutUs,
Info,
Menu
}
}
</script>
But that doesn't work. So how do I import libraries properly so I can use the directives?
Try to use import instead of using require.
The es6 script will be transpiled to old js versions when you build the app.
<template>
<div>
<Navbar/>
<Cover/>
<button class="btn btn-primary" v-scroll-to="'#about'">Hallo</button>
<Offers/>
<AboutUs id="about"/>
<Info/>
</div>
</template>
<script>
import Navbar from '#/components/Navbar'
import Cover from '#/components/main/Cover'
import Offers from '#/components/main/Offer/Offers'
import AboutUs from '#/components/main/AboutUs'
import Info from '#/components/main/Info'
import Menu from '#/components/main/menu/Menu'
import Vue from 'vue';
import VueScrollTo from 'vue-scrollto';
Vue.use(VueScrollTo)
export default {
components: {
Navbar,
Cover,
Offers,
AboutUs,
Info,
Menu
}
}
</script>
So bacause I use Vue it did the following:
create a new file called nuxt-scroll-to.js in the plugins folder with this code:
import Vue from 'vue';
import VueScrollTo from 'vue-scrollto/vue-scrollto.js';
Vue.use(VueScrollTo)
and the in the nuxt.config.js array add this code: { src: '~/plugins/nuxt-scroll-to.js', ssr: false },
Related
I am trying to use CKEditor with vue 3 composition api locally but the editor not shown on the page
here is may component
<template>
<PageWrapper title="Post">
<CKEditor :editor="editor"></CKEditor>
</PageWrapper>
</template>
<script setup>
import PageWrapper from '#/components/PageWrapper.vue'
import CKEditor from '#ckeditor/ckeditor5-vue'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
const editor = ClassicEditor
</script>
What's wrong?
From the official documentation it's pretty straightforward, using script setup, i found it working this way
import CKEditor from '#ckeditor/ckeditor5-vue'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
const editor = ClassicEditor
const ckeditor = CKEditor.component
then you can use the component in the template properly.
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
import {reactive} from 'vue'
export default {
setup() {
let editor = reactive(ClassicEditor);
return {editor}
}
}
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.
Hi I'm trying to import a component in Vue 3.
This is my component structure :
+src
+App.vue
+components
+Navbar.vue
In my App.vue I tried :
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
<Navbar/>
</div>
</template>
<script>
import Navbar from './components/Navbar.vue';
</script>
This is my main.ts :
import { createApp } from 'vue'
import router from './router'
import mitt from 'mitt';
const emitter = mitt();
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import BootstrapVue3 from 'bootstrap-vue-3'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.use(BootstrapVue3)
app.mount('#app')
app.config.globalProperties.emitter = emitter;
But I get this error :
Already included file name '/home/jip/Projects/snippedit/client/src/components/Navbar.vue' differs from file name '/home/jip/Projects/snippedit/client/src/components/navBar.vue' only in casing.
The file is in the program because:
Imported via './components/Navbar.vue' from file '/home/jip/Projects/snippedit/client/src/App.vue'
Root file specified for compilation
Root file specified for compilation
Does anyone know a solution to this problem?
Thanks in advance.
That's how App.vue should look like:
<template>
<div>
<Navbar />
</div>
</template>
<script setup>
import Navbar from './components/Navbar.vue';
</script>
If you are using vuter extension try restarting/reloading vscode
Using Vue.js I have this in my /Component/App.vue
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
export default {
name: 'app',
data () {
return {
}
}
<template>
<div id="appp">
<div id="chart-container">
</div>
</div>
</template>
In my js/examplevue.js Script I have
Vue.component('Chart', require('./components/App.vue'));
var app = new Vue({
el: '#app',
});
Then in my balde i have :
<div class=" " id="app">
<Chart>.</Chart>
</div>
<script src="{{ asset('js/examplevue.js') }}"></script>
I catch the error : Require is not defined. in Exemple.js
Usually, my vuejs code is working until i try to integer a component.
It looks like your App.vue file is malformed and there are two other errors:
in your template, the div id is mispelled as "appp" instead of "app" as defined in your examplevue.js file
I also noticed you were missing a closing } on your export default statement
If you want to use a <template> tag section you must also enclose all of your Javascript in <script> tags (see code below). :
/Component/App.vue
<template>
<div id="app">
<div id="chart-container">
</div>
</div>
</template>
<script>
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
export default {
name: 'app',
data () {
return {}
}
}
</script>
you may also have to put the following code in your examplevue.js file
import Vue from 'vue';
in order to create a new Vue instance.
Hope that helps!
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);
}
....
}