Vuejs: Multiple CSS template in one application

Question

I'm Vuejs beginners. How can I have multiple template in one application?

Example, for SignIn page, i would like to use Flatkit template, and for Admin dashboard, i would like to use other template (Dashboard). How do i combine those template in one app? In my index.html file, I already insert element for Flatkit, but when I insert Dashboard element, the CSS not working. What is the way to combine those link and script element

Here the project flow

index.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>

  <!-- LOGIN TEMPLATE -->
  <!-- for ios 7 style, multi-resolution icon of 152x152 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
  <link rel="apple-touch-icon" href="./Flatkit/assets/images/logo.png">
  <meta name="apple-mobile-web-app-title" content="Flatkit">

  <!-- for Chrome on Android, multi-resolution icon of 196x196 -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" sizes="196x196" href="./Flatkit/assets/images/logo.png">

  <!-- style -->
  <link rel="stylesheet" href="./Flatkit/assets/animate.css/animate.min.css" type="text/css" />
  <link rel="stylesheet" href="./Flatkit/assets/glyphicons/glyphicons.css" type="text/css" />
  <link rel="stylesheet" href="./Flatkit/assets/font-awesome/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="./Flatkit/assets/material-design-icons/material-design-icons.css" type="text/css" />

  <link rel="stylesheet" href="./Flatkit/assets/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
  <!-- build:css ../assets/styles/app.min.css -->
  <link rel="stylesheet" href="./Flatkit/assets/styles/app.css" type="text/css" />
  <!-- endbuild -->
  <link rel="stylesheet" href="./Flatkit/assets/styles/font.css" type="text/css" />

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  
  <!-- built files will be auto injected -->

  <!-- build:js scripts/app.html.js -->
  <!-- jQuery -->
  <script src="./Flatkit/libs/jquery/jquery/dist/jquery.js"></script>
  <!-- Bootstrap -->
  <script src="./Flatkit/libs/jquery/tether/dist/js/tether.min.js"></script>
  <script src="./Flatkit/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
  <!-- core -->
  <script src="./Flatkit/libs/jquery/underscore/underscore-min.js"></script>
  <script src="./Flatkit/libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
  <script src="./Flatkit/libs/jquery/PACE/pace.min.js"></script>

  <script src="./Flatkit/scripts/config.lazyload.js"></script>

  <script src="./Flatkit/scripts/palette.js"></script>
  <script src="./Flatkit/scripts/ui-load.js"></script>
  <script src="./Flatkits/cripts/ui-jp.js"></script>
  <script src="./Flatkit/scripts/ui-include.js"></script>
  <script src="./Flatkit/scripts/ui-device.js"></script>
  <script src="./Flatkit/scripts/ui-form.js"></script>
  <script src="./Flatkit/scripts/ui-nav.js"></script>
  <script src="./Flatkit/scripts/ui-screenfull.js"></script>
  <script src="./Flatkit/scripts/ui-scroll-to.js"></script>
  <script src="./Flatkit/scripts/ui-toggle-class.js"></script>

  <script src="./Flatkitscripts/app.js"></script>

  <!-- ajax -->
  <script src="./Flatkit/libs/jquery/jquery-pjax/jquery.pjax.js"></script>
  <script src="./Flatkit/scripts/ajax.js"></script>
  <!-- endbuild -->

 </body>

</html>

Instead of adding CSS templates in index.html, import CSS files in respected components. Read this- stackoverflow.com/questions/43784202/… — Neha Soni
– Neha Soni, Commented Dec 3, 2022 at 16:30
If you want to use any kind of modern tech, I recommend that you skip jQuery entirely. Use style scoped in your components and use import for your JS modules. Overall, a read of the documentation would be a good start. — kissu
– kissu, Commented Dec 3, 2022 at 16:32

kissu · Accepted Answer · 2022-12-03 16:33:43Z

0

you can use 2 different main html page if your main scripts are entirely different. You can configure it in backend.

Another idea is adding only common scripts and styles in html file. And use your scoped styles in components. Add style of each component in "style" tag below "script" tag. make the style scoped using :

VUE COMPONENT:

<template>
</template>

<script>
<script>

<style scoped>
    /* your style */ 
</style>

Scope of this style would only be applicable to current component.

edited Dec 3, 2022 at 16:33

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Dec 3, 2022 at 16:30

Neha

2,3115 gold badges27 silver badges56 bronze badges

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

Collectives™ on Stack Overflow

Vuejs: Multiple CSS template in one application

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related