Skip to content

Commit

Permalink
add vue instantsearch
Browse files Browse the repository at this point in the history
  • Loading branch information
eunjae-lee committed Jun 17, 2021
1 parent e2f21f4 commit 558e3d4
Show file tree
Hide file tree
Showing 7 changed files with 463 additions and 76 deletions.
5 changes: 5 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"singleQuote": true,
"trailingComma": "es5",
"semi": false
}
12 changes: 7 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,16 @@
"debug": "node --inspect-brk server"
},
"dependencies": {
"vue": "^3.0.8",
"algoliasearch": "^4.9.3",
"vue": "^3.1.1",
"vue-instantsearch": "https://pkg.csb.dev/algolia/vue-instantsearch/commit/2f681d14/vue-instantsearch",
"vue-router": "^4.0.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.0.0",
"@vitejs/plugin-vue-jsx": "^1.1.2",
"@vue/compiler-sfc": "^3.0.8",
"@vue/server-renderer": "^3.0.6",
"@vitejs/plugin-vue": "1.2.3",
"@vitejs/plugin-vue-jsx": "1.1.5",
"@vue/compiler-sfc": "3.1.1",
"@vue/server-renderer": "3.1.1",
"compression": "^1.7.4",
"cross-env": "^7.0.3",
"dep-import-type": "link:./dep-import-type",
Expand Down
22 changes: 0 additions & 22 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,3 @@
</router-view>
</div>
</template>

<style>
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./assets/fonts/Inter-Italic.woff2?#iefix') format('woff2'),
url('./assets/fonts/Inter-Italic.woff') format('woff');
}
.inter {
font-family: 'Inter';
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4 changes: 4 additions & 0 deletions src/main.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import InstantSearch from 'vue-instantsearch/dist/vue3/es'
// import InstantSearch from 'vue-instantsearch'

import App from './App.vue'
import { createSSRApp } from 'vue'
import { createRouter } from './router'
Expand All @@ -8,6 +11,7 @@ import { createRouter } from './router'
export function createApp() {
const app = createSSRApp(App)
const router = createRouter()
// app.use(InstantSearch)
app.use(router)
return { app, router }
}
160 changes: 136 additions & 24 deletions src/pages/Home.vue
Original file line number Diff line number Diff line change
@@ -1,32 +1,144 @@
<template>
<h1>Home</h1>
<p>
<img src="../assets/logo.png" alt="logo" />
</p>
<button @click="state.count++">count is: {{ state.count }}</button>
<Foo />
<p class="virtual">msg from virtual module: {{ foo.msg }}</p>
<p class="inter">this will be styled with a font-face</p>

<ImportType />
<div>
<p>hello</p>
<!-- <header class="header">
<h1 class="header-title">
<a href="/">
vue-instantsearch-app
</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="instant_search"
>
<div class="search-panel">
<div class="search-panel__filters">
<ais-panel>
<ais-refinement-list attribute="brand" />
</ais-panel>
</div>
<div class="search-panel__results">
<div class="searchbox">
<ais-search-box placeholder="" />
</div>
<ais-hits>
<template v-slot:item="{ item }">
<article>
<h1>
<ais-highlight :hit="item" attribute="name" />
</h1>
<p>
<ais-highlight :hit="item" attribute="description" />
</p>
</article>
</template>
</ais-hits>
<div class="pagination">
<ais-pagination />
</div>
</div>
</div>
</ais-instant-search>
</div> -->
</div>
</template>

<script setup>
import foo from '@foo'
import { reactive, defineAsyncComponent } from 'vue'
const ImportType = load('ImportType')
const Foo = defineAsyncComponent(() =>
import('../components/Foo').then((mod) => mod.Foo)
)
function load(file) {
return defineAsyncComponent(() => import(`../components/${file}.vue`))
}
const state = reactive({ count: 0 })
<script>
// import algoliasearch from 'algoliasearch/lite'
export default {
data() {
return {
// searchClient: algoliasearch(
// 'latency',
// '6be0576ff61c053d5f9a3225e2a90f76'
// ),
}
},
}
</script>

<style scoped>
h1,
a {
color: green;
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';
}
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>
26 changes: 7 additions & 19 deletions vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,12 @@ const vueJsx = require('@vitejs/plugin-vue-jsx')
* @type {import('vite').UserConfig}
*/
module.exports = {
plugins: [
vuePlugin(),
vueJsx(),
{
name: 'virtual',
resolveId(id) {
if (id === '@foo') {
return id
}
},
load(id) {
if (id === '@foo') {
return `export default { msg: 'hi' }`
}
}
}
],
plugins: [vuePlugin(), vueJsx()],
build: {
minify: false
}
minify: false,
},
ssr: {
external: ['algoliasearch-helper', 'qs', 'hogan.js'],
noExternal: ['vue-instantsearch'],
},
}
Loading

0 comments on commit 558e3d4

Please sign in to comment.