create-instantsearch-app 5.1.2 → 5.2.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [5.2.0](https://github.com/algolia/create-instantsearch-app/compare/5.1.2...5.2.0) (2022-02-14)
+
+
+### Features
+
+* **templates:** introduce React InstantSearch Hooks Native template ([#559](https://github.com/algolia/create-instantsearch-app/issues/559)) ([495f014](https://github.com/algolia/create-instantsearch-app/commit/495f0140301185bba9192ccd779597d4d5028241))
+* **vue:** add vue3 template ([#558](https://github.com/algolia/create-instantsearch-app/issues/558)) ([117067e](https://github.com/algolia/create-instantsearch-app/commit/117067ea0c4da0d08105d2de1e8b611f935b533a))
+
+
+
 ## [5.1.2](https://github.com/algolia/create-instantsearch-app/compare/5.1.1...5.1.2) (2022-02-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-instantsearch-app",
-  "version": "5.1.2",
+  "version": "5.2.0",
   "license": "MIT",
   "description": "⚡️ Build InstantSearch apps at the speed of thought",
   "keywords": [

package/src/api/__tests__/__snapshots__/index.test.js.snap

@@ -6,10 +6,10 @@ exports[`Options with invalid name throws 1`] = `
   - name can only contain URL-friendly characters"
 `;
 
-exports[`Options with unknown template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2"`;
+exports[`Options with unknown template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Hooks Native, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;
 
-exports[`Options with wrong template path throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2"`;
+exports[`Options with wrong template path throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Hooks Native, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;
 
 exports[`Options without path throws 1`] = `"The option \`path\` is required."`;
 
-exports[`Options without template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2"`;
+exports[`Options without template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Hooks Native, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;

package/src/templates/React InstantSearch Hooks Native/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

package/src/templates/React InstantSearch Hooks Native/.gitignore.template

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

package/src/templates/React InstantSearch Hooks Native/.template.js

@@ -0,0 +1,34 @@
+const chalk = require('chalk');
+const install = require('../../tasks/node/install');
+const teardown = require('../../tasks/node/teardown');
+
+module.exports = {
+  category: 'Mobile',
+  libraryName: 'react-instantsearch-hooks',
+  templateName: 'react-instantsearch-hooks-native',
+  appName: 'react-instantsearch-hooks-native-app',
+  keywords: [
+    'algolia',
+    'instantSearch',
+    'react',
+    'react-native',
+    'react-instantsearch-hooks-native',
+  ],
+  tasks: {
+    setup(config) {
+      if (!config.silent && config.attributesForFaceting) {
+        console.log();
+        console.log(
+          `⚠️   The ${chalk.cyan(
+            'attributesForFaceting'
+          )} option is not supported in this template.`
+        );
+        console.log();
+      }
+
+      return Promise.resolve();
+    },
+    install,
+    teardown,
+  },
+};

package/src/templates/React InstantSearch Hooks Native/App.tsx.hbs

@@ -0,0 +1,72 @@
+import React, { useRef } from 'react';
+import { FlatList, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import algoliasearch from 'algoliasearch/lite';
+import { InstantSearch } from 'react-instantsearch-hooks';
+
+import { InfiniteHits } from './src/InfiniteHits';
+import { SearchBox } from './src/SearchBox';
+{{#if attributesToDisplay}}
+import { Highlight } from './src/Highlight';
+{{/if}}
+import { ProductHit } from './types/ProductHit';
+
+const searchClient = algoliasearch(
+  '{{appId}}',
+  '{{apiKey}}'
+);
+
+export default function App() {
+  const listRef = useRef<FlatList>(null);
+
+  return (
+    <SafeAreaView style={styles.safe}>
+      <StatusBar style="light" />
+      <View style={styles.container}>
+        <InstantSearch searchClient={searchClient} indexName="{{indexName}}">
+          <SearchBox
+            onChange={() =>
+              listRef.current?.scrollToOffset({ animated: false, offset: 0 })
+            }
+          />
+          <InfiniteHits ref={listRef} hitComponent={Hit} />
+        </InstantSearch>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+type HitProps = {
+  hit: ProductHit;
+};
+
+function Hit({ hit }: HitProps) {
+  return (
+    {{#if attributesToDisplay}}
+    <Text>
+      <Highlight hit={hit} attribute="{{attributesToDisplay.[0]}}" />
+    </Text>
+    {{#each attributesToDisplay}}
+    {{#unless @first}}
+    <Text>
+      <Highlight hit={hit} attribute="{{this}}" />
+    </Text>
+    {{/unless}}
+    {{/each}}
+    {{else}}
+    <Text>{JSON.stringify(hit).slice(0, 100)}</Text>
+    {{/if}}
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: {
+    flex: 1,
+    backgroundColor: '#252b33',
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    flexDirection: 'column',
+  },
+});

package/src/templates/React InstantSearch Hooks Native/README.md

@@ -0,0 +1,19 @@
+# {{name}}
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+```sh
+npm install
+npm start
+```
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+```sh
+yarn
+yarn start
+```

package/src/templates/React InstantSearch Hooks Native/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "{{name}}",
+    "slug": "{{name}}",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/src/templates/React InstantSearch Hooks Native/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package/src/templates/React InstantSearch Hooks Native/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "{{name}}",
+  "version": "1.0.0",
+  "private": true,
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "algoliasearch": "4.12.1",
+    "expo": "~44.0.0",
+    "expo-status-bar": "~1.2.0",
+    "instantsearch.js": "4.38.1",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-instantsearch-hooks": "{{libraryVersion}}",
+    "react-native": "0.64.3",
+    "react-native-web": "0.17.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.64.12",
+    "expo-cli": "5.1.1",
+    "typescript": "~4.3.5"
+  }
+}

package/src/templates/React InstantSearch Hooks Native/src/Highlight.tsx

@@ -0,0 +1,81 @@
+import React, { Fragment } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { Hit as AlgoliaHit } from '@algolia/client-search';
+import {
+  getHighlightedParts,
+  getPropertyByPath,
+} from 'instantsearch.js/es/lib/utils';
+
+type HighlightPartProps = {
+  children: React.ReactNode;
+  isHighlighted: boolean;
+};
+
+function HighlightPart({ children, isHighlighted }: HighlightPartProps) {
+  return (
+    <Text style={isHighlighted ? styles.highlighted : styles.nonHighlighted}>
+      {children}
+    </Text>
+  );
+}
+
+type HighlightProps<THit> = {
+  hit: THit;
+  attribute: keyof THit | string[];
+  className?: string;
+  separator?: string;
+};
+
+export function Highlight<THit extends AlgoliaHit<Record<string, unknown>>>({
+  hit,
+  attribute,
+  separator = ', ',
+}: HighlightProps<THit>) {
+  const { value: attributeValue = '' } =
+    getPropertyByPath(hit._highlightResult, attribute as string) || {};
+  const parts = getHighlightedParts(attributeValue);
+
+  return (
+    <>
+      {parts.map((part, partIndex) => {
+        if (Array.isArray(part)) {
+          const isLastPart = partIndex === parts.length - 1;
+
+          return (
+            <Fragment key={partIndex}>
+              {part.map((subPart, subPartIndex) => (
+                <HighlightPart
+                  key={subPartIndex}
+                  isHighlighted={subPart.isHighlighted}
+                >
+                  {subPart.value}
+                </HighlightPart>
+              ))}
+
+              {!isLastPart && separator}
+            </Fragment>
+          );
+        }
+
+        return (
+          <HighlightPart key={partIndex} isHighlighted={part.isHighlighted}>
+            {part.value}
+          </HighlightPart>
+        );
+      })}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  highlighted: {
+    fontWeight: 'bold',
+    backgroundColor: '#f5df4d',
+    color: '#6f6106',
+  },
+  nonHighlighted: {
+    fontWeight: 'normal',
+    backgroundColor: 'transparent',
+    color: 'black',
+  },
+});

package/src/templates/React InstantSearch Hooks Native/src/InfiniteHits.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import { StyleSheet, View, FlatList } from 'react-native';
+import { Hit as AlgoliaHit } from '@algolia/client-search';
+import {
+  useInfiniteHits,
+  UseInfiniteHitsProps,
+} from 'react-instantsearch-hooks';
+
+type InfiniteHitsProps<THit> = UseInfiniteHitsProps & {
+  hitComponent: (props: { hit: THit }) => JSX.Element;
+};
+
+export const InfiniteHits = forwardRef(
+  <THit extends AlgoliaHit<Record<string, unknown>>>(
+    { hitComponent: Hit, ...props }: InfiniteHitsProps<THit>,
+    ref: React.ForwardedRef<FlatList<THit>>
+  ) => {
+    const { hits, isLastPage, showMore } = useInfiniteHits(props);
+
+    return (
+      <FlatList
+        ref={ref}
+        data={(hits as unknown) as THit[]}
+        keyExtractor={item => item.objectID}
+        ItemSeparatorComponent={() => <View style={styles.separator} />}
+        onEndReached={() => {
+          if (!isLastPage) {
+            showMore();
+          }
+        }}
+        renderItem={({ item }) => (
+          <View style={styles.item}>
+            <Hit hit={(item as unknown) as THit} />
+          </View>
+        )}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  separator: {
+    borderBottomWidth: 1,
+    borderColor: '#ddd',
+  },
+  item: {
+    padding: 18,
+  },
+});
+
+declare module 'react' {
+  // eslint-disable-next-line no-shadow
+  function forwardRef<TRef, TProps = unknown>(
+    render: (props: TProps, ref: React.Ref<TRef>) => React.ReactElement | null
+  ): (props: TProps & React.RefAttributes<TRef>) => React.ReactElement | null;
+}

package/src/templates/React InstantSearch Hooks Native/src/SearchBox.tsx.hbs

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet, View, TextInput } from 'react-native';
+import { useSearchBox, UseSearchBoxProps } from 'react-instantsearch-hooks';
+
+type SearchBoxProps = UseSearchBoxProps & {
+  onChange: (newValue: string) => void;
+};
+
+export function SearchBox({ onChange, ...props }: SearchBoxProps) {
+  const { query, refine } = useSearchBox(props);
+  const [value, setValue] = useState(query);
+  const inputRef = useRef<TextInput>(null);
+
+  // Track when the value coming from the React state changes to synchronize
+  // it with InstantSearch.
+  useEffect(() => {
+    if (query !== value) {
+      refine(value);
+    }
+    // We don't want to track when the React state value changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, refine]);
+
+  // Track when the InstantSearch query changes to synchronize it with
+  // the React state.
+  useEffect(() => {
+    // We bypass the state update if the input is focused to avoid concurrent
+    // updates when typing.
+    if (!inputRef.current?.isFocused() && query !== value) {
+      setValue(query);
+    }
+    // We don't want to track when the React state value changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query]);
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        ref={inputRef}
+        style={styles.input}
+        value={value}
+        onChangeText={newValue => {
+          setValue(newValue);
+          onChange(newValue);
+        }}
+        clearButtonMode="while-editing"
+        autoCapitalize="none"
+        autoCorrect={false}
+        spellCheck={false}
+        autoCompleteType="off"
+        placeholder="{{searchPlaceholder}}"
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#252b33',
+    padding: 18,
+  },
+  input: {
+    height: 48,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: '#fff',
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#ddd',
+  },
+});

package/src/templates/React InstantSearch Hooks Native/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}

package/src/templates/React InstantSearch Hooks Native/types/ProductHit.ts

@@ -0,0 +1,28 @@
+import { Hit as AlgoliaHit } from '@algolia/client-search';
+
+export type ProductHit = AlgoliaHit<{
+  brand: string;
+  categories: string[];
+  comments: number;
+  description: string;
+  free_shipping: boolean;
+  hierarchicalCategories: {
+    lvl0: string;
+    lvl1?: string;
+    lvl2?: string;
+    lvl3?: string;
+    lvl4?: string;
+    lvl5?: string;
+    lvl6?: string;
+  };
+  image: string;
+  name: string;
+  popularity: number;
+  price: number;
+  prince_range: string;
+  rating: number;
+  sale: boolean;
+  sale_price: string;
+  type: string;
+  url: string;
+}>;

package/src/templates/Vue InstantSearch with Vue 3/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/src/templates/Vue InstantSearch with Vue 3/.gitignore.template

@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/src/templates/Vue InstantSearch with Vue 3/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "proseWrap": "never",
+  "trailingComma": "es5"
+}

package/src/templates/Vue InstantSearch with Vue 3/.template.js

@@ -0,0 +1,18 @@
+const install = require('../../tasks/node/install');
+const teardown = require('../../tasks/node/teardown');
+
+module.exports = {
+  category: 'Web',
+  libraryName: 'vue-instantsearch',
+  supportedVersion: '>= 4.3.3 < 5.0.0',
+  flags: {
+    dynamicWidgets: '>=4.2.0',
+  },
+  templateName: 'vue-instantsearch-vue3',
+  appName: 'vue-instantsearch-app',
+  keywords: ['algolia', 'InstantSearch', 'Vue', 'vue-instantsearch'],
+  tasks: {
+    install,
+    teardown,
+  },
+};

package/src/templates/Vue InstantSearch with Vue 3/README.md

@@ -0,0 +1,21 @@
+# {{name}}
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+```sh
+npm install
+npm run dev
+```
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+```sh
+yarn
+yarn dev
+```
+
+Open http://localhost:3000 to see your app.

package/src/templates/Vue InstantSearch with Vue 3/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.png" />
+    <!--
+      Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
+      https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
+    -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
+    <title>{{name}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/src/templates/Vue InstantSearch with Vue 3/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{name}}",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "algoliasearch": "4.12.1",
+    "vue": "3.2.25",
+    "vue-instantsearch": "{{libraryVersion}}"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "2.2.0",
+    "vite": "2.8.0"
+  }
+}

package/src/templates/Vue InstantSearch with Vue 3/src/App.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <header class="header">
+      <h1 class="header-title">
+        <a href="/">{{ name }}</a>
+      </h1>
+      <p class="header-subtitle">
+        using
+        <a href="https://github.com/algolia/vue-instantsearch">
+          Vue InstantSearch
+        </a>
+      </p>
+    </header>
+
+    <div class="container">
+      <ais-instant-search
+        :search-client="searchClient"
+        index-name="{{indexName}}"
+      >
+        <div class="search-panel">
+          <div class="search-panel__filters">
+            {{#if flags.dynamicWidgets}}
+            <ais-dynamic-widgets>
+              {{#each attributesForFaceting}}
+              <ais-refinement-list attribute="{{this}}" />
+              {{/each}}
+            </ais-dynamic-widgets>
+            {{else}}
+            {{#each attributesForFaceting}}
+            <ais-refinement-list attribute="{{this}}" />
+            {{/each}}
+            {{/if}}
+          </div>
+
+          <div class="search-panel__results">
+            <div class="searchbox">
+              <ais-search-box placeholder="{{searchPlaceholder}}" />
+            </div>
+            {{#if attributesToDisplay}}
+            <ais-hits>
+              <template v-slot:item="{ item }">
+                <article>
+                  <h1>
+                    <ais-highlight
+                      :hit="item"
+                      attribute="{{attributesToDisplay.[0]}}"
+                    />
+                  </h1>
+                  {{#each attributesToDisplay}}
+                  {{#unless @first}}
+                  <p>
+                    <ais-highlight :hit="item" attribute="{{this}}" />
+                  </p>
+                  {{/unless}}
+                  {{/each}}
+                </article>
+              </template>
+            </ais-hits>
+            {{else}}
+            <ais-hits />
+            {{/if}}
+
+            <div class="pagination">
+              <ais-pagination />
+            </div>
+          </div>
+        </div>
+      </ais-instant-search>
+    </div>
+  </div>
+</template>
+
+<script>
+import algoliasearch from 'algoliasearch/lite';
+
+export default {
+  data() {
+    return {
+      searchClient: algoliasearch('{{appId}}', '{{apiKey}}'),
+    };
+  },
+};
+</script>
+
+<style>
+body,
+h1 {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+h1 {
+  font-size: 1rem;
+}
+
+em {
+  background: cyan;
+  font-style: normal;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 0.5rem 1rem;
+  background-image: linear-gradient(to right, #4dba87, #2f9088);
+  color: #fff;
+  margin-bottom: 1rem;
+}
+
+.header a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.header-title {
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.header-title::after {
+  content: ' ▸ ';
+  padding: 0 0.5rem;
+}
+
+.header-subtitle {
+  font-size: 1.2rem;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
+}
+
+.searchbox {
+  margin-bottom: 2rem;
+}
+
+.pagination {
+  margin: 2rem auto;
+  text-align: center;
+}
+</style>

package/src/templates/Vue InstantSearch with Vue 3/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import InstantSearch from 'vue-instantsearch/vue3/es';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(InstantSearch);
+app.mount('#app');

package/src/templates/Vue InstantSearch with Vue 3/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})