1 files changed, 12 insertions, 1 deletions
diff --git a/app/assets/javascripts/snippets/components/show.vue b/app/assets/javascripts/snippets/components/show.vue
index bc0034d397e..0779e87e6b6 100644
--- a/app/assets/javascripts/snippets/components/show.vue
+++ b/app/assets/javascripts/snippets/components/show.vue
@@ -1,19 +1,27 @@
 <script>
+import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 import SnippetHeader from './snippet_header.vue';
 import SnippetTitle from './snippet_title.vue';
 import SnippetBlob from './snippet_blob_view.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
 
 import { getSnippetMixin } from '../mixins/snippets';
+import { SNIPPET_VISIBILITY_PUBLIC } from '~/snippets/constants';
 
 export default {
   components: {
+    BlobEmbeddable,
     SnippetHeader,
     SnippetTitle,
     GlLoadingIcon,
     SnippetBlob,
   },
   mixins: [getSnippetMixin],
+  computed: {
+    embeddable() {
+      return this.snippet.visibilityLevel === SNIPPET_VISIBILITY_PUBLIC;
+    },
+  },
 };
 </script>
 <template>
@@ -27,7 +35,10 @@ export default {
     <template v-else>
       <snippet-header :snippet="snippet" />
       <snippet-title :snippet="snippet" />
-      <snippet-blob :snippet="snippet" />
+      <blob-embeddable v-if="embeddable" class="gl-mb-5" :url="snippet.webUrl" />
+      <div v-for="blob in blobs" :key="blob.path">
+        <snippet-blob :snippet="snippet" :blob="blob" />
+      </div>
     </template>
   </div>
 </template>