I have a problem with my VUE js project. I use the library VueperSlides and it's run correctly but my problem, is that the slider is imported in the components App.vue and it's displayed. I want to display the slider only in my Slider component.
I have a router link which runs correctly.
This is the APP.VUE component
This the HomePage (I want to put away this slider )
This is the Slider Vue
Just import it on your HomePage.vue:
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";
export default {
components: {
VueperSlides,
VueperSlide
},
// ...
}
Then use vueper-slides and vueper-slide components on your template.
Related
The dynamically created Dialog is mounted under the <body> tag by default, so that the global Provide and Inject cannot be used. How can Dialog be mounted under div#app or mounted under parent ?
It is always mounted either under <body> (non-SSR) or nowhere (SSR mode) - not just "by default". Just look at the sources - https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/private/global-nodes.js#L6
You can setup the provide on the Vue app, using app.provide() instead of an <App/> component. For example, in the entry script
import { createApp } from 'vue'
import { Quasar, Dialog } from 'quasar'
import App from './App.vue'
createApp(App)
.provide('name', value)
.use(Quasar, {
plugins: {
Dialog,
}
})
.mount('#app')
Then you will be able to use inject() the same item in Quasar dialog children, even though the dialog is mounted under <body>.
When I add a tag to a new component in the Vue.js template, PhpStorm automatically replace my separated script tag. I know you don't understand what I just wrote. Here an example of what happened.
My original App.vue looks like this:
<template>
<my-other-component></my-other-component>
<template>
// Note the script link to a separate Ts file.
<script src="./App.ts"></script>
App.ts file:
import { Vue } from 'vue-property-decorator'
import { Component } from 'vue-property-decorator'
#Component()
export default class App extends Vue {
}
Everything is fine from here.
The problem comes when I add a tag to another new component in the template, and let PhpStorm handle the import, it replace my script tag to this:
<script>
import Vue from 'vue'
import { Component } from 'vue-class-component'
import AttributeBindingSelector from '#/components/Properties/Types/AttributeBindingSelector'
#Component({
components: { AttributeBindingSelector }
})
export default class App extends Vue {
}
</script>
Note the script tag generated by PhpStorm replaced my <script src="./App.ts"></script> instead of importing the component into my ./App.ts typescript file.
Here is a video about what is happening: https://drive.google.com/file/d/1Kv7R3WKToWjAlCRyGNQjm_UNlLWTezXV/view?usp=sharing
I'm using Webpack dynamic imports and Vue dynamic components to lazy-load a rather large Vue markdown-parsing component.
Now, I want to add syntax highlighting with Prism.js. I'm currently using the mounted() lifecycle hook of the parent component to install syntax highlighting, but this is only working some of the time, since the syntax highlighting depends on the Markdown component to be loaded first (when I manually execute Prism.highlightAll() from the console after page load, it works every time).
Relevant source code:
<template>
<vue-markdown>
# Hello
```javascript
import { hello } from "world"
```
</vue-markdown>
</template>
<script>
export default {
components: {
"vue-markdown": () => import("vue-markdown/src/VueMarkdown"),
},
mounted() {
import("prismjs/themes/prism-tomorrow.css")
.then(() => import("prismjs").then(p => Prism.highlightAll()))
}
}
</script>
So how do I wait for a dynamic component to load? I almost want something like this:
<vue-markdown v-on:mounted="syntaxHighlighting()"></vue-markdown>
I solved the problem by creating my own component which extends the VueMarkdown component, but with a mounted() hook that activates syntax highlighting. It looks like this:
<script>
import VueMarkdown from "vue-markdown/src/VueMarkdown"
import "prismjs/themes/prism-tomorrow.css"
import Prism from "prismjs"
export default {
extends: VueMarkdown,
mounted() {
Prism.highlightAll()
}
}
</script>
Then, I dynamically import this component into the parent component.
Not sure if this is the best solution, though...
I am just new to vue and working on this example Notes application, it can be found below
https://coligo.io/learn-vuex-by-building-notes-app/
My question is how can I change component seen on screen right behind the toolbar. I have read basic guide but I am still behind it.
Lets say I have a button on left side call it message and have another component listing like NotesList and its called MessagesList. So, When I click message button, I want NotesList dissappear and MessageList come instead of that, and vice versa. I do not want NotesList stay as consistent on screen.
Here is App.vue and main.js files, please look in github page for mode code.
https://github.com/coligo-io/notes-app-vuejs-vuex
<template>
<div id="app">
<toolbar></toolbar>
<notes-list></notes-list>
<editor></editor>
</div>
</template>
<script>
import Toolbar from './Toolbar.vue'
import NotesList from './NotesList.vue'
import Editor from './Editor.vue'
import MessageList from './MessageList.vue'
export default {
components: {
Toolbar,
NotesList,
Editor,
MessageList
}
}
</script>
Main.js
import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'
new Vue({
store, // inject store to all children
el: 'body',
components: { App }
})
You could do this either by using v-if on each of the components, or by using dynamic components. In either case, your button should toggle a data value which would be used to control which component is displayed.
I'm a new vuejs developer. I have study vueje for a while and now I decided to develop a project using vuejs.
So I learn about nuxtjs which is server side rendering. everything goes well. I can use bootstrap4 with my project.
Now I would like to use flickity carousel https://flickity.metafizzy.co on my project and I found that there is a vuejs package on https://github.com/drewjbartlett/vue-flickity
I follow the instruction how to install this component to my project by
npm install vue-flickity --save
and put on some code
<script>
import Logo from '~/components/Logo.vue'
import Searchbar from '~/components/Searchbar.vue'
import axios from 'axios'
import Flickity from 'vue-flickity';
export default {
data () {
return {
has_location: false,
flickityOptions: {
initialIndex: 3,
prevNextButtons: false,
pageDots: false,
wrapAround: true
}
}
},
components: {
Logo,
Searchbar,
Flickity
}
}
</script>
but it show window is not defined
I have try this with another component like google map, it's show the same error.
Please tell me what wrong did I do and how to install new component to the project.
Thank you.
Nuxt.js use SSR to render your website server side, therefore window object is not accessible on node.js environment.
What you need to do is use the built-in no-ssr component to prevent Nuxt.js to render it on the server side.
You can simply do this:
<no-ssr>
<Flickity :options="...">
<!-- slides -->
</Flickity>
</no-ssr>
UPDATE: If you still get an error at this point, then load Flickity in
a custom Plugin that you will load with ssr disabled
Create a file named plugins/VueFlickity.js
import Vue from 'vue'
import Flickity from 'vue-flickity'
Vue.component('Flickity', Flickity)
Then in your nuxt.config.js your add:
module.exports = {
// ...
plugins: [
{ src: '~/plugins/VueFlickity.js', ssr: false }
]
}
Don't forget to remove the Flickity local component registration:
components: {
Logo,
Searchbar
// Flickity <-- remove this line
}
This was tested and is now fully working.
I fixed it with:
let Flickity = {};
if (process.browser) {
Flickity = require('flickity.js');
}
#rayfranco pointed a great way.:) The thing is that by doing this in that way You're importing this plugin globally, but not as local component which is better for performance.
So You can do it also like this:
let Flickity;
if (process.client) {
Flickity = require('vue-flickity')
}
export default {
components: {
Flickity
}
}
and use this component this way:
Important: <no-ssr>......</no-ssr> is deprecated in Nuxt > 2.9, so use
<client-only>
<Flickity :options="...">
<div class="carousel-cell">1</div>
<div class="carousel-cell">2</div>
<div class="carousel-cell">3</div>
</Flickity>
</client-only>
you can also look into brief example by Josh Deltener
https://deltener.com/blog/common-problems-with-the-nuxt-client-only-component/