VueJs not displaying SVGs

Question

I'm creating a single page application using VueJs and I'm facing a problem that all my SVGs are not being rendered. I'm using webpack-simple CLI and I'm using SLDS(Salesforce Lightning Design System) as CSS framework, which is providing me all my svgs.

Here is one of my components which are not displaying the SVGs:

export default {
        props: ['tabData']
    }

This component above is called in other component named GlobalNavigation:

import DashboardTab from '../navigation-tabs/DashboardTab.vue';
    import TabsContainer from '../navigation-tabs/TabsContainer.vue';
    import NavigationTab from '../navigation-tabs/NavigationTab.vue';
    
    export default {
        data() {
            return {
                navigationTabs: [
                    {
                        tabName: 'Organizações',
                        hasMenu: true
                    },
                    {
                        tabName: 'Contas',
                        hasMenu: false
                    }
                ]
            };
        },
        components: {
            ursusDashboardTab: DashboardTab,
            ursusTabsContainer: TabsContainer,
            ursusNavigationTab: NavigationTab
        }
    }

.slds-global-navigation {
        margin-top: 50px;
    }

And finally GlobalNavigation is called in my App.vue file

export default {
    data() {
        return {
            displayTrialBar: false,
            displayAlert: false
        }
    }
}

.slds-unscrollable-page {
        overflow: hidden;
    }

And here you can check my main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import App from './App.vue';
import {routes} from './routes';
import { store } from './store';

import TrialBar from './components/global/TrialBar.vue';
import Alert from './components/global/Alert.vue';
import GlobalHeader from './components/global/GlobalHeader.vue';
import GlobalNavigation from './components/global/GlobalNavigation.vue';
import MainArea from './components/global/MainArea.vue';
import PageHeader from './components/page/PageHeader.vue';
import PageBody from './components/page/PageBody.vue';

Vue.use(VueRouter);
Vue.use(VueResource);

Vue.component('ursus-trial-bar', TrialBar);
Vue.component('ursus-alert', Alert);
Vue.component('ursus-global-header', GlobalHeader);
Vue.component('ursus-global-navigation', GlobalNavigation);
Vue.component('ursus-main-area', MainArea);
Vue.component('ursus-page-header', PageHeader);
Vue.component('ursus-page-body', PageBody);

const router = new VueRouter({
    routes,
    mode: 'history'
});

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

And also here is my webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

bbsimonbb · Accepted Answer

What does your browser debug show? Your svgs have tags with relative urls. These will be resolved by the browser, and it's likely that they're not pointing to where you think. Your browser network tab should tell you what's going on?

VueJs not displaying SVGs

Answers (1)

Related Questions