search

creativetimofficial / ct-vue-argon-dashboard-pro

Vue Argon Dashboard Pro - Premium Bootstrap 5 Vuejs Admin Template
https://www.creative-tim.com/product/vue-argon-dashboard-pro
25 stars 7 forks source link

Fonts not loading correct when porting to Nuxt, same issue as on the Free Dashboard Deployment. #2

Closed headofthetable closed 5 years ago

headofthetable commented 5 years ago

Prerequisites

Please answer the following questions for yourself before submitting an issue.

Expected Behavior

I finished porting the Vue Argon Dashboard Pro to Nuxt and am running into a few issues, one of which is that the correct Open Sans fonts are not loading on the dashboard. This is what I NEED:

Screen Shot 2019-06-05 at 2 30 56 PM

Current Behavior

What is the current behavior?

This is what I am currently getting, if you look at the charts you will notice the issue immediately:

Screen Shot 2019-06-05 at 2 07 21 PM

From this screenshot you will also notice that the sidebar doesn't load correctly and the font-awesome icons are not loading correctly, but I will bring those up after.

Steps to Reproduce

  1. Create a Nuxt project, copy the argon assets and components into the respective nuxt assets and components folder. Copy the views to the Nuxt pages folder and put their respective components into the Nuxt components folder. Copy the util folder into the base level Nuxt directory. Add the respective layouts to the Nuxt layouts folder. Copy dashboard-plugin.js, globalComponents.js, and globalDirectives.js to the Nuxt plugins folder.
  2. In the nuxt.config.js file, add the following this to the plugins section: plugins: [ '~/plugins/dashboard/dashboard-plugin', '~/plugins/dashboard/globalComponents', '~/plugins/dashboard/globalDirectives', ],

and this to the css section: css: [ 'assets/css/nucleo/css/nucleo.css', 'assets/sass/argon.scss', 'bootstrap-vue/dist/bootstrap-vue.css' ],

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Failure Logs

No Failure Logs

--

I assume this is probably a simple error, because the same error can actually be found on the current deployment of the Free Vue Argon Dashboard hosted on the Creative-Tim site.

You can see the exact same issue when looking at the fonts all around the dashboard.

Edit: By the way, I was using @cristijora paper/Nuxt repo as a guide

cristijora commented 5 years ago

Hi @vipulhpatel First of all thanks for using our products and for the very detailed issue! Really appreciate it and congrats on moving it to Nuxt!

So I think, you should take a look at public/index.html file as it contains some stuff you might want to add inside nuxt as well.

You can find there 2 links, 1 for fontawesome and 1 for Open Sans font

<!-- Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

Make sure to add them in your nuxt.config.js or you can create an app.html template inside your src folder. https://nuxtjs.org/guide/views#app-template

Also you might want to add these classes to the body tag

<body class="g-sidenav-show g-sidenav-pinned">
  {{APP}}
</body>

to make the sidebar expanded by default

headofthetable commented 5 years ago

@cristijora This worked! I can't believe I completely missed the index.html file as I was porting the dashboard over to Nuxt haha.

Thank you so much! And thanks for making awesome products, these dashboards/kits you all make are great starting points for projects!

cristijora commented 5 years ago

Awesome. Great to hear that @vipulhpatel Btw do you mind maybe sending an archive to joracristi@gmail.com I think other people might be interested in a Nuxt project as well (or maybe I will add it in the default archive). Would like to send a gift in this case as well from our side

headofthetable commented 5 years ago

@cristijora absolutely, I will send it to you in a few hours!