@yannickherzog/vue-immo-components v0.1.55

IMMO Search Components

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies as vue plugin

npm run build:plugin

Compiles and minifies filter wizard to use on other websites

npm run build:wizard

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Build

Es kann entweder das Packet als Plugin oder die einzelnen Komponenten gebaut werden.

Plugin

Das Plugin ist zum Installieren über NPM ausgelegt und muss vorher publiziert werden. npm login danach wird username und password abgefragt. Anschließend kann das Paket veröffentlicht werden mit:

npm publish --access public

Die Versionsnummer muss sich zum vorherigen Build unterscheiden.

Verwendung

Plugin

Die Bibliothek muss in das Vue-Projekt eingebunden, um die Komponenten verwenden zu können:

import VueImmoComponents from '@yannickherzog/vue-immo-components';
import '@yannickherzog/vue-immo-components/dist/vue-immo-components.css';
Vue.use(VueImmoComponents);

Komponenten

Die Komponenten können auch unabhängig voneinander verwendet werden. Hierzu muss in das HTML-Dokument Vue.js, Vuetify.js sowie die zu verwendende Komponente geladen und diese mit Vue initailisiert werden. Gegebenenfalls müssen die Styles von Vuetify hinzugefügt werden.

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="/path/to/vue-immo-components.css"></link>
<script src="/path/to/vue-immo-components.umd.min.js"></script>

<div id="app">
  <div>
    <top-slider object-base-url="/immo/objekt" unit-base-url="/immo/expose" />
  </div>
  <div>
    <filter-wizard-stepper search-base-url="/immo/" />
  </div>
  <div>
    <filter-wizard search-base-url="/immo/" />
  </div>
  <div>
    <visited-slider :item-ids="['0726dad4-d825-4dc7-a689-4820736828a3']" unit-base-url="/immo/expose" />
  </div>
</div>

<script>
// Make sure to use plugin
Vue.use('vue-immo-components');

new Vue({
  vuetify: new Vuetify({
    lang: {
      current: 'de'
    },
    theme: {
      themes: {
        light: {
          primary: '#28829e',
          accent: '#DDDADA',
          secondary: '#ed7004',
          info: '#094680',
          warning: '#c89f3e',
          error: '#f44336',
          success: '#4baf76'
        }
      }
    }
  }),
}).$mount('#app')
</script>

vue-immo-components.common.js
vue-immo-components.common.js.map
vue-immo-components.umd.js
vue-immo-components.umd.js.map
vue-immo-components.umd.min.js
vue-immo-components.umd.min.js.map