<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.
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/
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>
I'm testing out the Vuex store implementation in Nuxt and wondered whether the Store folder is now the best way of sharing components and modules, rather than with the Components folder?
For example, I currently call the header from default.vue in the Layouts folder with this code referencing the Components folder:
<template>
<div class="container">
<Header />
<nuxt />
<Footer />
</div>
</template>
<script>
import Header from '~/components/appheader.vue'
import Footer from '~/components/appfooter.vue'
export default {
components: { Header, Footer }
}
</script>
But, as far as I understand, if header.vue is in the Store folder then it can simply be called with the filename, like this below with no need to import or export it. Have I understood that correctly?
<template>
<div class="container">
<appheader></appheader>
<nuxt />
<appfooter></appheader>
</div>
</template>
No, the store folder should not contains components. Put your components only in components folder.
The store folder is only for modularizing Vuex.
If you don't want to write your import statement in each components, you can use nuxt-global-base-components. But I'm not convinced this is a good practice...
Also, be careful with your components name. Header and Footer are html reserved words. Name them AppHeader and AppFooter instead.
I'm just starting with nuxtjs, i have 2 pages
-index
-map
map page has one component, which is client only
and the default layout has links to the 2 pages, just the basic setup
the production build generates code split for the vendor per page but both files loads at the first page, i can't find what am i missing.
map page
<div class="container">
<client-only>
<Map />
</client-only>
</div>
</template>
<script>
import Map from '~/components/Map.vue'
export default {
components: {
Map
}
}
</script>
<style>
</style>
index page
<template>
<div class="container">
<h1 class="h-1">test hello page index</h1>
</div>
</template>
<script>
export default {
components: {
}
}
</script>
<style>
</style>
default layout
<template>
<div>
<nuxt-link to="/">home</nuxt-link>
<nuxt-link to="/map">map</nuxt-link>
<nuxt />
</div>
</template>
<style>
</style>
This is because nuxt-link prefetches the page it is linked to when it appears inside the viewport.
It's for performance reason and should not impact the initial loading of the page, since the prefetching is done during idle time.
If you would like to verify that what you are seeing is because of the prefetching, you can disable prefetching on per link basis by adding a no-prefetch attribute to nuxt-link or configuring router in nuxt.config.js
// nuxt.config.js
export default {
router: {
prefetchLinks: false
}
}
This is done only if user is on good network connection and not using save data mode. And, since this is done in browser's idle time, I'd suggest, leave it like this. Should not hurt.
I create an application using Vuetify. One component should display a schedule that is created using dxhtmlScheduler. But global Vuetify styles overwrite local dxhtmlScheduler styles and therefore the schedule is not displayed correctly. How to make dxhtmlScheduler styles a particular component had a higher priority than the styles Vuetify?
<template >
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</template>
<script>
import 'dhtmlx-scheduler'
export default {
name: "Scheduler",
mounted() {
scheduler.init("scheduler_here");
}
}
</script>
<style scoped>
#import "../../node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css";
</style>
The markup generated by dhtmlxScheduler lives outside vue component scope, so I don't think scoped styles would work with it.
Try removing scoped attribute from your style declaration
<style>
#import "../../node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css";
</style>
Here is a related github issue https://github.com/vuejs/vue-loader/issues/559
Explanation:
Vue adds a special data-v-xxxxxxx attribute to html elements created by your component.
Vue css-loader in its turn modifies selectors in scoped css in order to explicitly match elements inside your component and nothing outside.
So .dhx_cal_event_line { background: blue; } in dhtmlscheduler.css becomes .dhx_cal_event_line[data-v-xxxxxxx] { backtround: blue; } when loaded to the page. Such style is supposed to only affect a component with the matching value of data-v attribute.
The problem is, DOM elements of dhtmlxscheduler are created by the library code outside the vue component knowledge, they don't have vue data-v-xxxxxxx attributes, thus scoped css selectors no longer matches them.
Thus, you'll have to load scheduler css as a global style.
There is maybe a better solution, but unfortunately, I don't know it.