0
<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.

1
  • link is not added. Commented May 6, 2017 at 11:39

2 Answers 2

2

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.

Sign up to request clarification or add additional context in comments.

Comments

0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.