I'm currently using Floating Vue to handle my Dropdowns in Nuxt 2. Though, I have installed it via npm and added a plugin file to my /plugins folder, I've also added it to my nuxt.config.js file.
The dropdowns are working, though they look like they are attaching themselves to the body tag, resulting in them appearing at the bottom of the page outside of the _nuxt layout tag.
Has anyone used this Package with Nuxt2?
FloatingVue.js
import Vue from 'vue'
import FloatingVue from 'floating-vue'
Vue.use(FloatingVue)
nuxt.config.js
plugins: [
{ src: '~/plugins/floaty' }
],
Template
<VDropdown
:distance="6"
>
<!-- This will be the popover reference (for the events and position) -->
<button>Click me</button>
<!-- This will be the content of the popover -->
<template #popper>
Hello
</template>
</VDropdown>
Related
i'm new of this framework :(
the problem is here because i've tried to put the component in another page and work it.
It sign error the component
this is my index.vue page
If you're using nuxt2.0, you should wrap them in a container but this is not needed in nuxt3.0.
<template>
<main>
<navbar />
<slideshow />
</main>
</template>
If this is nuxt2.0, then you should also import the component and register it but you haven't done it here. The path you've given to the component is not correct also.
<script>
import Slideshow from '~/components/slideshow.vue';
export default {
components: { Slideshow }
}
</script>
You need to wrap the into a div or any other tag (to not have multiple tags at the root of the template) like that
<template>
<div>
<navbar></navbar>
<slideshow></slideshow>
</div>
</template>
And you can also skip the import part because Nuxt is already doing that for you as explained here: https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components/
How do I display syntax-highlighted HTML code like this picture from the VueJS documentation?
I have tried using v-html but I just get a console error.
Upon inspecting the VueJS documentation code snips, you can see they contain the class hljs.
This class is used by HighlightJS, a simple framework for code syntax highlighting.
HighlightJS automatically detects the language based on the syntax and can be extended with custom themes and configurations.
To install it in your vue package simply run either npm install highlight.js --save or yarn add highlight.js.
Once installed, import it and register it as a Vue plugin Vue.use(hljs.vuePlugin);
You can then use the component within your Vue templates:
<div id="app">
<!-- bind to a data property named `code` -->
<highlightjs autodetect :code="code" />
<!-- or literal code works as well -->
<highlightjs language='javascript' code="var x = 5;" />
</div>
You can find the above Vue example here in the documentation.
You could just put out the sanitized string:
new Vue({
el: "#app",
data() {
return {
script: `<script src="https://unpkg.com/vue#next"></script>`,
}
},
template: `
<div>
Code:<br>
<code v-html="script"></code><br>
</div>
`,
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
Edit 10/7/2020: I couldn't ever get this to work. Ended up falling back to ASP.NET Razor server rendering, despite it not being what I wanted for this component. If anyone has any ideas in the future, I'm all ears.
So, I'm making a single file component that represents a notification panel on my site. The site is mostly generated server side with ASP.NET Core's Razor view engine. This notification panel will be the second Vue component added to the site, as it needs to be a bit more reactive/responsive than a server rendered component will allow us.
The component has no style defined in it's definition, rather the component uses the global site.css added in the <head> tag.
Onto the issue...
I'm noticing some very strange behavior with Vue 3's component rendering. Below is a sanitized version of my component:
NotificationPanel.vue
<template>
<div class="custom-item-inner custom-rounded">
<p class="custom-h2style">
Notifications
</p>
<div class="custom-section-divide">
<p class="custom-section-title">Section Title</p>
<p class="custom-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor, odio sit amet volutpat pretium.</p>
<div class="custom-item-link">
Perform Action
</div>
</div>
</div>
</template>
<script>
export default {
name: "notifications-panel",
data() {
return {
placeholder: ""
}
},
mounted() {
console.log("Hello world");
}
}
</script>
My expectation is that this would render to the component to the page and the globally defined CSS would get applied to this markup. Instead, I'm seeing a warning in the developer console:
The white line that the arrow is pointing to is the component's container, which is defined in CSHTML. The component itself is not rendered, but was definitely mounted, judging by console output.
Here's the weird part: If I remove class="custom-section-title" from the <p> tag in the middle of my template, this is what gets rendered:
What on earth is happening? This makes absolutely zero sense to me...
Any ideas? Thanks
Extra details:
This is how the component is being used in the cshtml code.
<!-- Notifications Block-->
<div class="col-12 col-lg-4 col-xl-3 sidenav custom-item custom-notifys">
<notifications-panel />
</div>
in main.js, I'm importing createApp from 'vue/dist/vue.esm-browser', which was explained to me here.
If you are having more than one copy of vue included in the app then you can face this kind difficulty.
limit your different configurations to make and include single copy of vue.
Vue 2 syntax
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//your code ..
Vue 3:
import vue 3 like this.
import {createApp} from 'vue';
Or use the following syntax
import * as Vue from 'vue';
import * as VueRouter from 'vue-router';
//your code ..
then you can use webpack, laravel-mix etc. to generate single files.
For those with this same issue, the answer of #Murad is correct.
If you are loading more than one instance of Vue, this error happened. In my case, I was trying to create a small server to run E2E tests over my plugin.
In the main repository, I added Vue as a dependency but on the small app/server used to do the E2E tests I was using the Vue CDN because I was trying to serve small HTML pages using Vite for it.
My mistake was that I think Vite only serves the pages, but behind the hood, it is using Vue when we use the Vue plugin for Vite.
I solved it by removing the CDN of Vue from the HTML and importing directly the Vue package from my node_modules to create the small app that loads my plugin in order to do the E2E tests.
import {createApp} from 'vue'; // instead of use the Vue CDN
I Googled this error and only find the reason for that, I mean "load Vue more than once a time" but any answer explains why this happens.
I hope this explanation will be useful.
Regards and good luck.
I am having problems with my Nuxt.js site.
I have defined a page, with a dynamic slug param, like this:
/solutions/:slug
If I visit the page directly in the browser, it loads correctly!
But if I click the nuxt-link in my NavBar component, I get the following error in the console, and the page does not load:
vue.runtime.esm.js?2b0e:619
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
I have a default layout file that looks like this:
layouts/default.vue
<template>
<div>
<NavBar />
<Nuxt />
</div>
</template>
<script>
import NavBar from "~/components/Layout/NavBar"
export default {
components: {
NavBar,
},
}
</script>
My navbar contains the following nuxt-link:
components/Layout/NavBar.vue
<template>
<b-navbar wrapper-class="container" fixed-top>
<template slot="end">
<nuxt-link
:to="{
name: 'solutions-slug',
params: { slug: 'performance' },
}"
class="navbar-item"
target="self"
>
<span class="icon is-medium">
<i class="ic ic--larger ic-b1-graph-bars-chart-rise" />
</span>
<span class="label">
Performance
</span>
</nuxt-link>
</template>
</b-navbar>
</template>
I have a page, defined by the slug param:
pages/solutions/_slug.vue
<template>
<div class="solution">
This is my solution page.
</div>
</template>
I am trying to understand why clicking the nuxt-link fails to load the page, even though I see the URL change in the browser correctly.
Thanks
After version v2.13, Nuxt can auto-import your components when used in your templates.
check the nuxt.config.js if components attribute is true then you don't need to import your component on the .vue files.
in your layouts/default.vue remove script tag ;-)
<template>
<div>
<NavBar />
<Nuxt />
</div>
</template>
If you need to categorize your components by folder, do the following.
goto nuxt.config.js and change your components attribute
export default {
components: {
dirs: [
'~/components',
{
path : '~/components/site/',
prefix: 'Site'
},
{
path : '~/components/admin',
prefix: 'Admin'
},
{
path : '~/components/admin/sub',
prefix: 'AdminSub'
}
]
}
}
for example, we have these components :
components
| site
- header
| admin
- header
- footer
| sub
- header
- footer
when we need to call components just separate prefixes and component names with a dash or write camelcase.
in your layouts/default.vue remove script tag ;-)
<template>
<div>
<!-- with dash -->
<site-header></site-header>
<admin-header></admin-header>
<admin-sub-header></admin-sub-header>
<!-- cammel -->
<SiteHeader></SiteHeader>
<AdminHeader></AdminHeader>
<AdminSubHeader></AdminSubHeader>
</div>
</template>
Attention: For Root Components /components/nav.vue, We Must Use CammelCase <Nav/> and if we call this component like this <nav/> it doesn't work.
Probably the problem is not related to anything described above.
First, check if your configuration is correct. I see you are using 'nuxtjs/content' module, so you are probably using Contentful as well. In the past, I have encountered a similar situation ('Failed to mount component: template or render function not defined' issue) due to incorrect installation of the 'dotenv' module that I used to store variables.
In my case, the application did not load variables from the .env file. As a consequence, they went to the Contentful client unidentified and caused the js error. For some reason, this error did not always appear in the console. Instead, the above-mentioned Warn appeared.
Make sure you have the 'dotenv' module correctly installed (if you use it). I remember that in my case it was necessary to install 'nuxtjs/dotenv' instead of the usual dotenv.
Let me know if this is the case. Good luck
<template>
<div>
<sidnav></sidnav>
<topnav></topnav>
</div>
</template>
<script>
import sidnav from '#/components/sidnav.vue'
import topnav from '#/components/topnav.vue'
export default {
components: {
sidnav,
topnav
}
}
</script>
This is the Dashboard home, it will route throw sidenav and topnav
I'm trying to make admin panel with VueJS.
I am able to make the login and load the js and css in index.html
but when i make the dashboard, I don't know how to load or include the css and the js for the dashboard only.
so is there a way to include the 'js' and 'css' l enter code hereink into the Dashboard home page.
You have several options, one of the things vue devs advise is to have all your related css withing the .vue file so:
<template>
<div class="someselector">
<sidnav></sidnav>
<topnav></topnav>
</div>
</template>
<script>
...
</script>
<style>
.someselector {
...
}
</style>
then inside sidnav.vue, same style thing with the css.
anyway, if you DO want to include a css file, you can do
<style>
#import 'YOURPATH/to/file.css';
</style>
NOW, if what you want is to import/require a file (js or css) and that be called "automatically" in your bundle folder, then you need to be more specific, share webpack or gulp config, etc.
You could produce two separate build file (with webpack or gulp), one for the main application and one for the admin panel. After that you import the admin bundle only in the admin page. Another solution for css is to embed your css in the style tag inside admin panel components.