psychosocial227
1 week ago
112
2
Vue

Using multiple CSS file on Vue.

Posted 1 week ago by psychosocial227
//This my main.js file

import Vue from 'vue';

import VueRouter from 'vue-router';


Vue.use(VueRouter);


// Router-view to mount

import Purplex from './components/Purplex.vue';


//routes

import routes from './routes';


const router = new VueRouter({

mode: 'history',

IinkActiveClass: 'is-active',

routes

});


const app = new Vue({

el: '#app',

components:{ Purplex },

router,

});


//This my router-view component

<template>

<div>


<navbar> </navbar>


<router-view> </router-view>


<foot> </foot>


</div>

</template>



<script>


import Navbar from '././views/userInterface/Navbar.vue'

import Foot from './views/userInterface/Footer.vue';


export default {


components: {

Navbar,

Foot

},


}

</script>


// this my app outlet file



<!doctype html>

<html lang="{{ app()->getLocale() }}">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">


<!-- CSRF Token -->

<meta name="csrf-token" content="{{ csrf_token() }}">


<!-- Styles -->

//user interface only
<link href=" {{ asset('css//user_interface/fontawesome.css') }}" rel="stylesheet">

//user interface only
<link href="{{ asset('css/user_interface/bulma.css') }}" rel="stylesheet">

//admin interface only

<link href=" {{ asset('css//admin_interface/fontawesome.css') }}" rel="stylesheet">


//admin interface only

<link href="{{ asset('css/admin_interface/bulma.css') }}" rel="stylesheet">


<!-- Animate.css to handle animation -->
<link href="{{ asset('css/animate.css') }}" rel="stylesheet">


</head>


<body>


<Purplex id="app"> </Purplex>


</body>


<script src="{{ mix('js/app.js') }}"></script>

<script src="{{ mix('js/purplex.js') }}"></script>


</html>

Please sign in or create an account to participate in this conversation.