I'm trying to use the composition api in a vue 2 module. When I initially created the npm module in the options api, I haven't experienced any issues and the module was installed and utilised accordingly. However, when I try to convert it to the composition api, I keep getting an error stating 'ref is not defined', after I install the npm module. From what I can understand, I must have something missing in the rollup config, but I can't really understand what as I'm fairly new to this.
Usually I would import ref in a component with the following code:
import {ref} from '#vue/composition-api';
For this case however, it doesn't cut it.
My rollup config file looks like this:
import commonjs from '#rollup/plugin-commonjs';
import vue from 'rollup-plugin-vue';
import buble from '#rollup/plugin-buble';
import scss from 'rollup-plugin-scss';
export default {
external: ['vue', '#vue/composition-api'],
input: 'src/index.js',
output: {
name: 'BasicDropdown',
exports: 'named',
format: 'cjs',
globals: {
vue: 'vue',
compositionApi: '#vue/composition-api',
}
},
plugins: [
scss(),
vue({
css: true,
compileTemplate: true,
scss: true,
preprocessStyles: true
}),
commonjs(),
buble(),
],
};
I also tried using #rollup/plugin-node-resolve, but this also didn't work.
Can someone kindly explain what I should do to import the ref functions from the vue composition api?
EDIT: The error message I'm getting is [Vue warn]: Error in data(): "ReferenceError: ref is not defined"
Related
I have a Preact project using Vite. I want to use the nexmo-client SDK from vonage but when I import using the ES method it breaks my project.
// app.tsx
import NexmoClient from 'nexmo-client';
I get the following error in the console.
index.js:19 Uncaught ReferenceError: global is not defined
at index.js:19:19
at index.js:12:22
at node_modules/nexmo-client/dist/index.js (index.js:16:1)
at __require (chunk-J43GMYXM.js?v=f3505250:11:50)
at dep:nexmo-client:1:16
However if I import it using via a script tag it works just fine.
// index.html
<script src="node_modules/nexmo-client/dist/nexmoClient.js"></script>
// app.tsx
const NexmoClient = window.NexmoClient;
OK, there are two problems here.
Firstly, NexmoClient tries to use global which is not available on the browser.
Secondly, NexmoClient has a dependency on socket.io-client, for some reason Vite imports a Node version of the socket.io-client that again tries to use modules that are not available on the browser, namely 'child_process'.
To fix both issues you can provide the following config to Vite, this should make sure the resulting build is compatible with the brother.
// vite.config.js or vite.config.ts
import { defineConfig } from 'vite'
import preact from '#preact/preset-vite'
export default defineConfig({
plugins: [preact()],
define: {
global: {},
},
resolve: {
alias: {
"xmlhttprequest-ssl": "./node_modules/engine.io-client/lib/xmlhttprequest.js"
}
}
})
I have been trying to use vue-tel-input-vuetify in Nuxt and I have been having the issue as it is in the image below, I have also tried all the solutions in this link Github but I get the same error.
After installation, I created a plugin file plugins/vue-tel-input-vuetify.js and added the following code to it.
import Vue from 'vue'
import VueTelInputVuetify from 'vue-tel-input-vuetify'
Vue.use(VueTelInputVuetify)
After that, I added this to nuxt.config.js
plugins: [
'~/plugins/vue-tel-input-vuetify',
{ src: '~/plugins/vue-google-charts', mode: 'client' }
]
Between my component's script tags, I did this:
import { VueTelInputVuetify } from 'vue-tel-input-vuetify'
export default {
components: {
VueTelInputVuetify,
},
...
And between my component's template tags I added this:
<VueTelInputVuetify
ref="phoneInput"
v-model="phoneNumber"
hint="Enter your phone number..."
:rules="phoneNumberRules"
placeholder=""
label="Phone"
:required="true"
:validate-on-blur="true"
:input-options="{showDialCode: true, tabIndex: 0}"
:valid-characters-only="true"
mode="international"
/>
Updated answer
I've tried it myself, working perfectly fine with:
Nuxt at 2.15.7
#nuxtjs/vuetify at 1.12.1 (vuetify at 2.5.7)
vue-tel-input-vuetify at 1.3.0.
Had to write this in my phone-input plugin
import Vue from 'vue';
import vuetify from "vuetify";
import VueTelInputVuetify from 'vue-tel-input-vuetify/lib';
Vue.use(VueTelInputVuetify, {
vuetify,
});
And I've imported it like this in nuxt.config.js
plugins: ['#/plugins/phone-input'],
With the following template
<template>
<vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
</template>
<script>
export default {
data() {
return {
phone: ''
}
},
}
</script>
Here is a working github repo if you want to try it out by yourself.
Alternative idea
Looking at the documentation, it says that you need to transpile it (for Vue).
In nuxt.config.js, you could try the following to replicate the same need
build: {
transpile: [
'vue-tel-input-vuetify',
// 'vuetify' // this one may also be needed, try with and without
],
}
I'm new in nuxt js so when I try to add npm packages it won't work these are trials.
star-raing.js
import Vue from 'vue'
import StarsRatings from 'vue-star-rating'
Vue.use(StarsRatings)
nuxt.config.js
plugins: [{ src: '~/plugins/star-rating.js', mode: 'client' }],
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {},
transpile: ['star-rating']
}
it shows these errors
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This
is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or
missing <tbody>. Bailing hydration and performing full client-side render.
[Vue warn]: Unknown custom element: <stars-ratings> - did you register the component correctly? For
recursive components, make sure to provide the "name" option.
found in
---> <Deals> at components/Home/Deals.vue
<Home> at pages/index.vue
<Nuxt>
<Default> at layouts/default.vue
<Root>
I had the same problem and here is the answer:
in your plugin (star-rating.js):
import Vue from 'vue'
import VueStarRating from 'vue-star-rating'
Vue.component('StarRating', VueStarRating)
note: You have to create 'star-rating.js' in your 'plugin'
folder
don't forget mode:'client' in your nuxt.config.js:
plugins: [
{
src: '~/plugins/star-rating.js', mode: 'client'
},
]
finally in your .vue file you can simply use :
<star-rating v-model="rating">
</star-rating>
ps: this is working for vuejs 2x
by the way if you want to get rating props you can simply access to it like this :
export default {
name:"example",
data() {
return {
rating: 0,
}
},
}
You should register it in your star-rating.js as follows:
import Vue from 'vue';
import StarsRating from 'vue-star-rating';
Vue.component('StarsRating', StarsRating);
I'm trying to get imports like
import { startup } from "applicationRoot/renderUI";
to work, from anywhere in my application. I thought the rollup-plugin-alias would be a good fit for this. I tried configuring
alias({
applicationRoot: "applicationRoot/"
})
in my plugins array. This came close, but the extension is dropped, so I get the error:
c:\path\to\applicationRoot\renderUI doesn't exist.
Adding in
alias({
resolve: [".js"],
applicationRoot: "applicationRoot/"
}),
did not change anything.
You can use rollup-plugin-includepaths.
Add this to your Rollup configuration:
import includePaths from 'rollup-plugin-includepaths';
export default {
...
plugins: [
...
includePaths({ paths: ["./"] })
]
};
That will tell Rollup to also resolve imports from the root of your application, so things like
import { startup } from "applicationRoot/renderUI";
will appropriately find an applicationRoot folder where it is.
This is not the answer to the original question, but if you are coming here from search results and are using Typescript, you can set the compilerOptions.baseUrl in tsconfig and it will just work.
{
...
compilerOptions: {
...
"baseUrl": "./"
},
}
Then if you have a file like `src/lib/util.ts' you can import it:
import util from 'src/lib/util'
I have an App.js file like this:
import './bootstrap';
if (document.getElementById('vue')) {
new Vue({
});
}
It imports a bootstrap javascript file which holds the Vue npm package(node module).
In my bootstrap file I import it like so:
import Vue from 'vue';
When I run eslint with this setup though I get told:
'Vue' is not defined.
If the eslinter only checks per file this seems really obvious since the actually Vue variable is defined in a file that is imported. Can this be fixed cleanly though or do I have to edit my .eslintrc.js for a case like this?
I believe ES6 imports only apply to the current file (which is the main benefit of a module system – to avoid global contamination). Importing a module without bindings won't also make that module's imports available; they remain scoped to that module only.
You have a few options:
You can explicitly import it everywhere you need it (the intended way with modules).
import Vue from 'vue';
You can export Vue (and anything else) from your bootstrap file and import everything:
In bootstrap.js:
import Vue from 'vue';
export { Vue };
In App.js:
import * as bootstrap from './bootstrap';
const Vue = bootstrap.Vue;
You can make Vue global from in your bootstrap file, but it defeats the benefit of modules:
window.Vue = Vue;
The import and export articles at MDN give a good overview of different possible ways of importing and exporting.
You can try few configuration of eslint in .eslintrc to get this working. This error is coming with es6-modules, you can try playing with following config:
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": 2
}
}