SSR rendering fixed (#58)

FIxes #57.

README.md

@@ -7,10 +7,10 @@ _Country flags as a Vue Component_
 <p align="center">
 
   <img src="https://img.shields.io/npm/dm/vue-country-flag" alt="Monthly downloads">
-  <img src="https://packagephobia.now.sh/[email protected].0" alt="Install size">
+  <img src="https://packagephobia.now.sh/[email protected].1" alt="Install size">
   <img src="https://img.shields.io/badge/Vue.js%202-compatible-green.svg" alt="Vue.js 2 compatible">
   <img src="https://img.shields.io/badge/Vue.js%203-compatible-green.svg" alt="Vue.js 3 compatible">
-  <a href="https://www.npmjs.com/package/vue-country-flag"><img src="https://img.shields.io/badge/npm-2.1.0-blue.svg" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/vue-country-flag"><img src="https://img.shields.io/badge/npm-2.1.1-blue.svg" alt="Version"></a>
   <a href="https://www.npmjs.com/package/vue-country-flag"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
   <img src="https://img.shields.io/badge/TypeScript-supported-blue" alt="TypeScript Supported">
 

packages/vue-country-flag-next/README.md

@@ -5,9 +5,9 @@ _Country flags as a Vue 3 Component_
   <img src="https://github.com/P3trur0/vue-country-flag/blob/master/assets/logo.png?raw=true" alt="vue-country-flag"/>
 </p>
 <p align="center">
-  <img src="https://packagephobia.now.sh/[email protected].0" alt="Install size">
+  <img src="https://packagephobia.now.sh/[email protected].1" alt="Install size">
     <img src="https://img.shields.io/badge/Vue.js%203-compatible-green.svg" alt="Vue.js 3 compatible">
-  <a href="https://www.npmjs.com/package/vue-country-flag-next"><img src="https://img.shields.io/badge/npm-2.1.0-blue.svg" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/vue-country-flag-next"><img src="https://img.shields.io/badge/npm-2.1.1-blue.svg" alt="Version"></a>
   <a href="https://www.npmjs.com/package/vue-country-flag-next"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
   <img src="https://img.shields.io/badge/TypeScript-supported-blue" alt="TypeScript Supported">
 

packages/vue-country-flag-next/build/rollup.config.js

@@ -40,6 +40,7 @@ const baseConfig = {
     ],
     replace: {
       'process.env.NODE_ENV': JSON.stringify('production'),
+      "process.env.SSR": 'false',
       __name: 'vue-country-flag-next'
     },
     vue: {
@@ -130,7 +131,11 @@ if (!argv.format || argv.format === 'cjs') {
       globals,
     },
     plugins: [
-      replace(baseConfig.plugins.replace),
+      replace(
+        {
+          ...baseConfig.plugins.replace,
+          'process.env.SSR': 'true'
+      }),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
       ...baseConfig.plugins.postVue,

packages/vue-country-flag-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-country-flag-next",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Simple Vue component for displaying of country flags",
   "main": "dist/country-flag.ssr.js",
   "browser": "dist/CountryFlag.esm.js",

packages/vue-country-flag/README.md

@@ -5,9 +5,9 @@ _Country flags as a Vue Component_
   <img src="https://github.com/P3trur0/vue-country-flag/blob/master/assets/logo.png?raw=true" alt="vue-country-flag"/>
 </p>
 <p align="center">
-  <img src="https://packagephobia.now.sh/[email protected].0" alt="Install size">
+  <img src="https://packagephobia.now.sh/[email protected].1" alt="Install size">
   <img src="https://img.shields.io/badge/Vue.js%202-compatible-green.svg" alt="Vue.js 2 compatible">
-  <a href="https://www.npmjs.com/package/vue-country-flag"><img src="https://img.shields.io/badge/npm-2.1.0-blue.svg" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/vue-country-flag"><img src="https://img.shields.io/badge/npm-2.1.1-blue.svg" alt="Version"></a>
   <a href="https://www.npmjs.com/package/vue-country-flag"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
   <img src="https://img.shields.io/badge/TypeScript-supported-blue" alt="TypeScript Supported">
 

packages/vue-country-flag/build/rollup.config.js

@@ -43,6 +43,7 @@ const baseConfig = {
     ],
     replace: {
       "process.env.NODE_ENV": JSON.stringify("production"),
+      "process.env.SSR": 'false',
       __name: 'vue-country-flag'
     },
     vue: {
@@ -127,7 +128,11 @@ if (!argv.format || argv.format === 'cjs') {
       globals,
     },
     plugins: [
-      replace(baseConfig.plugins.replace),
+      replace(
+        {
+          ...baseConfig.plugins.replace,
+          'process.env.SSR': 'true'
+      }),
       ...baseConfig.plugins.preVue,
       vue({
         ...baseConfig.plugins.vue,

packages/vue-country-flag/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-country-flag",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Simple Vue component for displaying of country flags",
   "main": "dist/country-flag.ssr.js",
   "module": "dist/country-flag.esm.js",

packages/vue-country-flag/src/CountryFlag.vue

@@ -27,13 +27,17 @@ export default {
     }
   },
   computed: {
+    //__name is dynamically replaced through rollup-replace
     backgroundUrl() {
       if(this.background && this.background != '') {
         return this.background;
       } else {
-         return require(`__name/dist/flags.png`) //__name is dynamicall replaced through rollup-replace
+        if (process.env.SSR) {
+          return `__name/dist/flags.png`;
+        } else {
+         return require(`__name/dist/flags.png`)
+        }
       }
-     
     },
 
     flagIconClass () {