Expose static assets in nuxt

2
votes

I'm trying to refactor a bootstrap theme into a nuxt project. I want to serve the static files from static folder which looks like:

enter image description here

In my nuxt.config file I have:

head: {
title: pkg.name,
meta: [
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  { hid: 'description', name: 'description', content: pkg.description },
],
link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  { rel: 'stylesheet',  href: '/static/css/fancybox/jquery.fancybox.css' },
  { rel: 'stylesheet',  href: '/static/css/bootstrap.css' },
  { rel: 'stylesheet',  href: '/css/bootstrap-theme.css' },
  { rel: 'stylesheet',  href: '/css/slippry.css' },
  { rel: 'stylesheet',  href: '/static/css/style.css' },
  { rel: 'stylesheet',  href: '/static/color/default.css' },
],
script:[{'src': 'static/js/modernizr.custom.js' }]

},

However in my dev tools I see:

enter image description here

I've read https://nuxtjs.org/guide/assets/ but am still not clear how to make these assets available

How can I get this working?

EDIT: Following your directions I now have:

head: {
title: pkg.name,
meta: [
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  { hid: 'description', name: 'description', content: pkg.description },
],
link: [
  { rel: 'icon', type: 'image/x-icon', href: '~assets/favicon.ico' },
  { rel: 'stylesheet',  href: '~assets/css/fancybox/jquery.fancybox.css' },
  { rel: 'stylesheet',  href: '~assets/css/bootstrap.css' },
  { rel: 'stylesheet',  href: '~assets/css/bootstrap-theme.css' },
  { rel: 'stylesheet',  href: '~assets/css/slippry.css' },
  { rel: 'stylesheet',  href: '~assets/css/style.css' },
  { rel: 'stylesheet',  href: '~assets/color/default.css' },
],
script:[{'src': '~assets/js/modernizr.custom.js' }]

 },

My directory structure:

enter image description here

However when I try:

$npm run dev

I see:

enter image description here

2
javascriptvue.jsnuxt.js

2 Answers

1
votes

Rename static folder to assets folder and use ~assets/path-to-your-file to reference it. https://nuxtjs.org/guide/assets/

1
votes

If you use the static folder, all the assets are available at the root domain. See per docs

So your config all needs to be like this:

  { rel: 'stylesheet',  href: '/css/fancybox/jquery.fancybox.css' },
  { rel: 'stylesheet',  href: '/css/bootstrap.css' },

Best practice

However you should be compiling this css by nuxt, by just adding them to the css property in the nuxt config.

  css: [
   '@/assets/css/fancybox/jquery.fancybox.css',
   '@/assets/css/bootstrap.css'
  ],