4

What would be the steps to add a component to Vite with Vue, as an npm package?

I assumed these:

  1. npm install example
  2. open src/App.vue and add import Example from 'example'
  3. in App.vue, in <template>, add <Example />

Is that correct?

I am trying to install and use vue-select like so, but it's not working: enter image description here

enter image description here

Henno
  • 1,448
  • 4
  • 18
  • 30
  • I think in this example Vue Select is bound to `v-select` instead of `vSelect` as in your code. Do you have a running code pen or something, and I can get it working and update my answer to be more relevant to your situation – Alicia Sykes Apr 21 '22 at 13:46

2 Answers2

7

Your screenshot shows you're importing vSelect in a <script> block, and expecting it to be automatically registered for the component's template. That would only work in a <script setup> block.

However, your GitHub repo (which seems to be different from the screenshot you posted) reveals other issues in your code:

  1. You're using Vue 2 code to globally register the v-select component in your Vue 3 app. In Vue 3, global component registration is done from the application instance (i.e., returned from createApp()).
// main.js
import VSelect from 'vue-select';

// Vue.component('v-select', VSelect); ❌ Vue 2 code

import { createApp } from 'vue'
import App from './App.vue'

createApp(App)
  .component('v-select', VSelect) ✅
  .mount('#app')
  1. You're using @import (CSS syntax) to import your SCSS file in the <script> block. Either move the CSS into a <style lang="scss"> block; or remove the @ prefix, which would create a valid import for <script>.
<script setup>
// @import 'vue-select/src/scss/vue-select.scss'; ❌ The @ prefix is invalid in <script>
import 'vue-select/src/scss/vue-select.scss'; ✅
</script>

<!-- OR -->
<style lang="scss">
@import 'vue-select/src/scss/vue-select.scss';
</style>
  1. Your project is missing sass, which is required to process SCSS files. You can install it as a dev dependency with:
$ npm i -D sass

Here's a demo with the fixes pointed out above.

tony19
  • 125,647
  • 18
  • 229
  • 307
  • 1
    I got it working! Big thanks! That repo was an attempt to follow Lissy93's instructions on a new Vite project. It seems her suggestions were based on older Vite. Stuff is evolving so fast in the JavaScript landscape and looks like the documentation is lagging behind. Can you point me to documentation which describes the way you used to register VSelect to Vue there? I spent a big part of yesterday trying to get this working but I never encountered such version of component registration anywhere. – Henno Apr 22 '22 at 05:46
  • The docs link for global component registration via [`app.component()`](https://vuejs.org/api/application.html#app-component) is already in the answer :) Local component registration can be done via the `components` option (same as in Vue 2), or by importing the component in ` – tony19 Apr 22 '22 at 20:47
6

The process you described is correct, but you must also register the component before you can use it (within components: { ... }).

Since you mentioned you're using vue-select, I will use that as an example.

Step #0 - Install

As you've already done, ensure your project is initialized (npm init), then run yarn add vue-select / npm i vue-select.

Step #1 - Initialize

In your main.js, import and register with:

import VSelect from 'vue-select'; 

Vue.component('v-select', VSelect);

/* rest of your Vue initialization here */

Step #2 - Use Component

<v-select :options="[{label: 'Canada', code: 'ca'}]"></v-select>

You'll also need to import the stylesheet in your CSS, with:

@import 'vue-select/src/scss/vue-select.scss';

Real Example

If you want to see a full example, I am using this package in one of my projects, I'm registering the component in my main.js and using it ThemeSelector.vue.

Also, if your project is large and/ or you're only using this component in one place, then a better approach would be to import it into the component that's using it. This is done in a similar way, but you must also register it under components: { ... } for it to be accessible within your <template>.

Alicia Sykes
  • 5,997
  • 7
  • 36
  • 64
  • I got the error ✘ [ERROR] Unexpected "@" script:/Users/hennotaht/www/vite-vue-test/src/App.vue?id=0:5:0: 5 │ @import 'vue-select/src/scss/vue-select.scss'; ╵ ^ – Henno Apr 21 '22 at 17:13
  • I suspect it's not the only thing wrong, as main.js does not have Vue variable. Here's what I did: https://github.com/henno/vite-vue-test/commit/b6d63e74fd0b2bf134432a66114aba48179abf23 – Henno Apr 21 '22 at 17:14