Vue.js: Incorporating Multiple CSS Templates in a Single Application

As a beginner in Vuejs, I am trying to figure out how to incorporate multiple templates into one application. For example, I want to use the Flatkit template for my SignIn page and a different template (Dashboard) for the Admin dashboard. How can I integrate these templates seamlessly within the same app? I have already added the necessary elements for Flatkit in my index.html file but when I try to add the Dashboard element, the CSS seems to break. What is the best approach to combine these link and script elements?

Here is an overview of 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>
javascripthtmlcssvue.js

Answer №1

If you have completely different main scripts, consider using two separate main html pages and configure them in the backend.

Another option is to include only common scripts and styles in the html file, and use scoped styles in components. Add the style of each component within a "style" tag below the "script" tag and make it scoped with a colon like this:

VUE COMPONENT:

<template>
</template>

<script>
<script>

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

This scoped style will only affect the current component.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with Selenium as I attempt to click multiple "Remove" buttons, constantly encountering the StaleElementReferenceException error

I am facing a challenge when trying to remove multiple elements on a webpage. My current approach involves locating all the "Remove" buttons and clicking them one by one. However, I keep encountering a 'StaleElementReferenceException' as I remove ...

javahtmlseleniumselenium-webdriver

Using Javascript to populate textboxes with the value of checkboxes

Within my web application, there is a series of checkboxes that, when selected, populate a textbox located above them. If more than one checkbox is checked, their values are displayed in the textbox separated by commas. These checkboxes are structured as ...

javascriptjqueryhtml

Formatting dates in a C# MVC application after parsing JSON

I am working on an MVC application that retrieves data from a SQL database and passes it to a view. One of the views contains a Kendo grid that displays the data, including a date column. The date data is stored in the SQL database as DateTime, while the m ...

javascriptjsonajaxdatetime

Identifying the conclusion of a folder being dropped in vanilla JavaScript

I am working on determining when a directory tree has been completely traversed after being dropped onto a page. My goal is to identify the point at which the next process can begin once the entire folder and its sub-directories have been processed by the ...

javascript

The Array.find() method is not returning the desired value as it is not a recognized function

Is it permissible to use JavaScript's find() function on an AngularJS array? I am encountering some issues with this straightforward code snippet. The error message claims that the return value from $scope.names.find(name1) is not a function. TypeErr ...

javascriptarraysangularjs

What is the method for displaying a div adjacent to a password input field?

I am attempting to display a password verification box next to an input field. The current logic is functioning properly, but the box containing all password requirements is not appearing in the correct position. Instead of being positioned adjacent to the ...

javascriptjqueryhtmlcsstwitter-bootstrap

AngularJS: Utilizing bold text to enhance the separation of concerns between controllers and templates

In my AngularJS version 1 application with Ecmascript 6, I have a requirement to display a string where one part is in normal weight and the other part is bold. For instance, consider the following scenarios: Will start now Will start in 6 minutes Will ...

javascripthtmlangularjsecmascript-6

Using jQuery to encode an ampersand in a URL

I am facing an issue where some URLs with & in them need to be converted to HTML entities using jQuery. The original code looks like this: <div id="box"> <a href="http://domain.com/index.html&location=1">First URL</a> &l ...

jqueryhtmlurlencodeampersand

In AngularJS, the use of the '+' operator is causing concatenation instead of addition

Looking for assistance with my TypeScript code where I've created a basic calculator. Everything is working as expected except for addition, which seems to be concatenating the numbers instead of adding them together. HTML CODE : <input type="tex ...

javascriptangulartypescriptconcatenation

utilize computed properties to automatically update components when Vuex state changes

Currently, I'm in the process of developing a basic movie application using Vue and Vuex. My goal is to allow users to add movies to a favorites list by clicking a button. The movies are stored in the Vuex state; however, I'd like the text on the ...

vue.jsvuejs2vue-componentvuex

Exploring the world of frontend development with models: comparing Vue and Ember

When working in Laravel, I typically define my models at the beginning and use them for all actions. I've noticed that many frontend frameworks simply rely on the JSON data provided by an API response and store it in basic arrays. Ember is the only ...

vue.jsfrontendmodels

Ways to create a smooth transition in element height without a known fixed target height

Is it possible to create a smooth height transition for an element when the target height is unknown? Replacing height: unset with height: 100px allows the animation to work, but this presents a problem as the height needs to be based on content and may v ...

javascripthtmlcss

Sorting a VueJS table excluding certain rows is a breeze

Here is a sample code snippet for a v-table with sortable implementation: <script> export default { data() { return { sortBy: 'age', sortDesc: false, fields: [ { key: 'last_name', sort ...

vue.jssortingvuejs2bootstrap-vuevue-tables-2

jquery: selecting a specific child div element

Is it possible to target a child div of the current element in jQuery, apply toggle functionality to it, and simultaneously remove the link click effect? Below is the HTML code: <a href="#" class="title">Link</a> <div class="data"> c ...

jqueryhtml

Determining the condition of the menu: understanding whether it is open or closed

I'm diving into the world of jQuery and JavaScript, trying to grasp the ins and outs of the mmenu API. Despite my efforts to understand the libraries, the JavaScript code remains a mystery to me. Following the tutorial provided on , I successfully cr ...

javascriptjqueryhtmlcssmmenu

Color in the diamond shape only to a designated height

I am in search of a unique diamond shape that allows me to fill the color up to a specific height based on an attribute or variable provided. https://i.stack.imgur.com/62U6h.png. I attempted creating the diamond shape and initially considered placing it ...

javascripthtmlcss

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

My table displays product files, with the option to add notes. If a note is added, it shows in a row. If not, a text area field with a submit button appears instead. Everything seems to be working well, except for the first row without a note. After addin ...

htmlcssforms

Grunt Task Unable to Run Modules Referenced with Require in Node Code

I'm facing an issue with my grunt task setup. Here's the code snippet: module.exports = function(grunt) { var info = 'Syncs, updates English translations and downloads Chinese translations.'; grunt.registerTask('t ...

javascriptnode.jsgruntjs

Enhance Your Form Validation with jQuery UI Dialog Plugin

Currently, I am utilizing the bassistance validation plugin for form validation. I have set up a pop-up modal dialog box to contain a form that requires validation, but for some reason, the form is not getting called. I have checked all my ID's and re ...

javascriptjqueryjquery-uijquery-validatejquery-ui-dialog

unable to add browse-sync to Ubuntu 16.04

I recently installed nodejs and npm and attempted to install browser-sync using the command npm install -g browser-sync. However, I encountered an error. npm install -g browser-sync npm ERR! Linux 4.15.0-101-generic npm ERR! argv "/usr/bin/nodejs" "/ ...

javascriptnode.jsubuntunpmbrowser-sync