w3geo · ahocevar · Feb 10, 2025 · Feb 10, 2025
diff --git a/README.md b/README.md
@@ -46,8 +46,6 @@ With this, the map view will automatically be centered on the result geometry, a
 
 ## Developing
 
-To develop this plugin, it is recommended to set up a test app according to the instructions below, and use [npm link](https://docs.npmjs.com/cli/v10/commands/npm-link). When that is setup properly, use
+To develop this plugin, an example has been set up in `example/`. To run the example with dynamically built plugin, run
 
-    npm run watch
-
-to automatically update the linked package in the test application.
+    npm run dev:example
diff --git a/eslint.config.js b/eslint.config.js
@@ -35,6 +35,7 @@ export default [
     rules: {
       'no-unused-vars': 'off',
       'import/no-dynamic-require': 'warn',
+      'import/no-unresolved': 'off',
     },
   },
 ];
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="color-scheme" content="light dark">
+    <title>Vue Place Search</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -0,0 +1,51 @@
+<template>
+  <v-container class="d-flex justify-center align-center">
+    <v-card>
+      <v-card-title>OpenLayers Map</v-card-title>
+      <v-toolbar class="pr-1" density="compact">
+        <v-spacer /><place-search
+      /></v-toolbar>
+      <v-sheet class="fill-height">
+        <div ref="mapContainer" class="map"></div>
+      </v-sheet>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import 'ol/ol.css';
+import '../../dist/style.css';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import { onMounted, ref } from 'vue';
+import { PlaceSearch, usePlaceSearch } from '../../dist/vue-place-search.js';
+
+const mapContainer = ref(null);
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+    }),
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+  }),
+});
+
+usePlaceSearch(map);
+
+onMounted(() => {
+  map.setTarget(mapContainer.value);
+});
+</script>
+
+<style>
+.map {
+  width: 600px;
+  height: 400px;
+}
+</style>
diff --git a/example/src/main.js b/example/src/main.js
@@ -0,0 +1,20 @@
+import 'vuetify/styles';
+import { createVuetify } from 'vuetify';
+import App from './App.vue';
+import { createApp } from 'vue';
+import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
+
+const vuetify = createVuetify({
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi,
+    },
+  },
+});
+
+const app = createApp(App);
+app.use(vuetify);
+
+app.mount('#app');
diff --git a/example/src/plugins/index.js b/example/src/plugins/index.js
@@ -0,0 +1,5 @@
+import vuetify from './vuetify';
+
+export function registerPlugins(app) {
+  app.use(vuetify);
+}
diff --git a/example/src/plugins/vuetify.js b/example/src/plugins/vuetify.js
@@ -0,0 +1,18 @@
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import 'vuetify/styles';
+
+// Composables
+import { createVuetify } from 'vuetify';
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'dark',
+  },
+});
diff --git a/example/vite.config.mjs b/example/vite.config.mjs
@@ -0,0 +1,34 @@
+import Vue from '@vitejs/plugin-vue';
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
+
+// Utilities
+import { defineConfig } from 'vite';
+import { fileURLToPath, URL } from 'node:url';
+import { join, resolve } from 'node:path';
+
+const root = fileURLToPath(new URL('.', import.meta.url));
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root,
+  plugins: [
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    Vuetify(),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
+  },
+  server: {
+    port: 3000,
+  },
+  css: {
+    preprocessorOptions: {
+      sass: {
+        api: 'modern-compiler',
+      },
+    },
+  },
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "preview": "vite preview",
     "prepublishOnly": "npm run build",
     "watch": "nodemon --watch src -e js,json,mjs,vue --exec 'npm run build'",
+    "dev:example": "npm run watch & vite -c example/vite.config.mjs",
     "test": "npm run lint && npm run typecheck",
     "lint": "eslint .",
     "typecheck": "vue-tsc --noEmit"
@@ -58,6 +59,7 @@
     "vue-tsc": "^2.0.21"
   },
   "peerDependencies": {
+    "@mdi/js": "^7.4.47",
     "@types/geojson": "^7946.0.14",
     "ol": "*",
     "vue": "^3.0.0",