@wwtdev/bsds-components-vue3 1.6.4 → 1.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -60
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -30,67 +30,9 @@ import { BsButton } from '@wwtdev/bsds-components-vue3'
|
|
|
30
30
|
</template>
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
## Using the components in your Nuxt
|
|
33
|
+
## Using the components in your Nuxt 3 app
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
***/server/plugins/bsds-ssr.js*** (or whatever you want to name it)
|
|
38
|
-
```javascript
|
|
39
|
-
import ComponentLibServerPlugin from "@wwtdev/bsds-components-vue3/plugin-ssr.js";
|
|
40
|
-
import { defineNitroPlugin } from 'nitropack/dist/runtime/plugin'
|
|
41
|
-
|
|
42
|
-
export default defineNitroPlugin(ComponentLibServerPlugin);
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
***/plugins/bsds-components.js*** (or whatever you want to name it)
|
|
46
|
-
```javascript
|
|
47
|
-
import { ComponentLibrary, IconLibrary } from '@wwtdev/bsds-components-vue3'
|
|
48
|
-
|
|
49
|
-
export default defineNuxtPlugin((nuxtApp) => {
|
|
50
|
-
nuxtApp.vueApp.use(ComponentLibrary)
|
|
51
|
-
nuxtApp.vueApp.use(IconLibrary)
|
|
52
|
-
})
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
***/nuxt.config.ts***
|
|
56
|
-
> Note that though Nuxt will automagically register
|
|
57
|
-
> the component plugin in plugins, you will need
|
|
58
|
-
> to add the ssr plugin manually here.
|
|
59
|
-
```javascript
|
|
60
|
-
export default defineNuxtConfig({
|
|
61
|
-
...
|
|
62
|
-
css: [ '@wwtdev/bsds-components/dist/components/components.css' ],
|
|
63
|
-
build: {
|
|
64
|
-
transpile: [
|
|
65
|
-
'@wwtdev/bsds-components',
|
|
66
|
-
'@wwtdev/bsds-components-vue3',
|
|
67
|
-
'@wwtdev/bsds-icons'
|
|
68
|
-
]
|
|
69
|
-
},
|
|
70
|
-
vue: {
|
|
71
|
-
compilerOptions: {
|
|
72
|
-
isCustomElement: (tag) => /bs-.+/.test(tag),
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
nitro: {
|
|
76
|
-
plugins: ['plugins/bsds-ssr.js']
|
|
77
|
-
},
|
|
78
|
-
...
|
|
79
|
-
})
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
Now you can use BSDS Components in your code, just like standard Vue components, but be sure to import the component from the __/nuxt__ subdirectory:
|
|
83
|
-
```javascript
|
|
84
|
-
<script setup>
|
|
85
|
-
import { BsButton } from '@wwtdev/bsds-components-vue3/nuxt'
|
|
86
|
-
</script>
|
|
87
|
-
|
|
88
|
-
<template>
|
|
89
|
-
<div>
|
|
90
|
-
<BsButton>Hello World!</BsButton>
|
|
91
|
-
</div>
|
|
92
|
-
</template>
|
|
93
|
-
```
|
|
35
|
+
For Nuxt apps, we have a [@wwtdev/bsds-nuxt](https://npmjs.com/package/@wwtdev/bsds-nuxt) module. Refer to those instructions.
|
|
94
36
|
|
|
95
37
|
### Caveats
|
|
96
38
|
- Currently an issue where Vue components clash with Web Components in Nuxt apps. Investigating a fix to Vue wrappers to resolve.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wwtdev/bsds-components-vue3",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.5",
|
|
4
4
|
"description": "BSDS Vue3 Components",
|
|
5
5
|
"homepage": "",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -59,6 +59,6 @@
|
|
|
59
59
|
"wwt-package-publisher": "^4.1.2"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@wwtdev/bsds-components": "^1.6.
|
|
62
|
+
"@wwtdev/bsds-components": "^1.6.5"
|
|
63
63
|
}
|
|
64
64
|
}
|