thefln

 head: {
    title: 'snipcart-nuxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href:'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'},

thefln

// pages/index.vue
<script>
import axios from 'axios'
import SmallProduct from '~/components/SmallProduct.vue'

export default {
  components: {SmallProduct},
  async asyncData ({env, params}) {
    let {data} = await axios.get(`${env.cockpit.apiUrl}/collections/get/Product?token=${env.cockpit.apiToken}`)

thefln

// components/SmallProduct.vue
<template>
<div class="card">
  <header class="card-header">
    <div class="card-header-title is-centered">
        {{ product.Name }}
    </div>
  </header>

  <div class="card-image">

thefln

export default {
    title: 'Product',
    name: 'product',
    type: 'document',
    fields: [
      {
        title: 'Name',
        name: 'name',
        type: 'string'
      },

thefln

const createSchema = require('part:@sanity/base/schema-creator')
const schemaTypes = require('all:part:@sanity/base/schema-type')
import product from './product'

module.exports = createSchema({
  name: 'default',
  types: schemaTypes.concat([product])
})

thefln

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Query } from '@angular/core/src/metadata/di';

@Component({
  templateUrl: './products.component.html',
  styleUrls: ['./../../app.component.css'],
})
export class ProductsComponent implements OnInit {

thefln

<div class="products">
    <div *ngFor="let product of products" class="product">
        <a class="product" routerLink="product/{{ product._id }}">
            <img src="{{ product.imageUrl }}" height="200"/>
            <p class="product-name">{{ product.name }}</p>
        </a>

        <button class="snipcart-add-item"
            attr.data-item-name="{{ product.name }}"
            attr.data-item-id="{{ product._id }}"

thefln

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './product.component.html',
  styleUrls: ['./../../app.component.css'],
})

thefln

<div *ngIf="product" class="product">
    <img src="{{ product.imageUrl }}" height="400"/>
    <p>{{ product.name }}</p>
    
    <button class="snipcart-add-item"
    attr.data-item-name="{{ product.name }}"
    attr.data-item-id="{{ product._id }}"
    attr.data-item-image="{{ product.imageUrl }}"
    attr.data-item-price="{{ product.price }}"
    attr.data-item-description="{{ product.description }}"

thefln

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { ProductComponent } from './components/product/product.component';
import { ProductsComponent } from './components/products/products.component';

const appRoutes: Routes = [