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);
Related
I want to migrate my Vue 2 project from webpack to Vite.
And have to use 3rd party web components that built with lit-element.
Those components throws errors during the runtime (by vue):
Unknown custom element: < foo-component > - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
And also (by lit-element)
Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot':
Failed to convert value to 'CSSStyleSheet'.
As far as I can see those 3rd party web components do only this in theirs index files (inside node_modules):
import FooComponent from './FooComponent';
customElements.define('foo-component', FooComponent);
So before (with webpack setup) I just imported them and everything used to work. Well, actually for webpack lit-scss-loader was used also for those components.
I assume that Vite perhaps needs some additional configuration, or maybe something similar to "webpack" loader is needed here, but not sure what direction I have to move.
What I'm doing wrong?
Configure #vite/plugin-vue to ignore Lit elements, e.g., elements starting with my-lit in their registered name:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
// treat all components starting with `my-lit` as custom elements
isCustomElement: tag => tag.startsWith('my-lit'),
},
},
}),
],
})
demo
A couple of steps needed.
Imagine I have 3rd party webcomponents named "foo". So all of them are in node_modules/#foo.
I need to do these steps:
Tell Vite that all components starting with "foo-" are webcomponents.
isCustomElement: (tag) => tag.startsWith('foo-')
Add "postcssLit" plugin to help vite to prepare css for the webcomponents.
Tell to Vite how to threat css paths for webcomponents.
'~#foo': fileURLToPath(new URL('./node_modules/#foo', import.meta.url))
Here is the full config:
//vite.config.ts
import postcssLit from 'rollup-plugin-postcss-lit';
export default defineConfig({
plugins: [
vue(
{
template: {
compilerOptions: {
// 1. Tell Vite that all components starting with "foo-" are webcomponents
isCustomElement: (tag) => tag.startsWith('foo-')
}
}
}
),
vueJsx(),
// 2. This "postcssLit" plugin helps to make css for the webcomponents
postcssLit()
],
resolve: {
alias: {
// 3. Tell to Vite how to threat css paths for webcomponents
'~#foo': fileURLToPath(new URL('./node_modules/#foo', import.meta.url))
}
}
});
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"
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 create vuechartkick plugin in /plugin/vue-chartkick.
import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'
Vue.use(Chartkick.use(Chart))
nuxt template
<div class="pa-4 pa-md-8">
<div class="border-light pa-4 pa-md-12">
<line-chart legend="bottom" :data="series(resultSet)"> </line-chart>
</div>
</div>
Then I add the file path inside the plugins key of our nuxt.config.js.
plugins: [
'~/plugins/vue-chartkick.js',
],
I received this error
[Vue warn]: Unknown custom element: <line-chart> - did you register the component correctly? For recursive components, make sure to provide the "name" option
But not working correctly.
Some plugins might work only in the browser because they lack SSR support.
vue-chartkick and chart.js cannot be run on server side, therefore you have to enable your custom plugin only on client side as follows:
plugins: [
{ src: '~/plugins/vue-chartkick.js', mode: 'client' },
],
or by naming convention *.client.js:
plugins: [
'~/plugins/vue-chartkick.client.js',
],
See docs: https://nuxtjs.org/docs/2.x/directory-structure/plugins/#object-syntax
In addition, your component will be used to render a component only on client-side. So you have to use the <client-only> helper element in your Nuxt page as below:
<template>
<div>
<client-only placeholder="loading...">
<your-chart-component>
</client-only>
</div>
</template>
To know more, see nuxt docs: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component
I have added Intro.js as below in one of my components:
import introJs from 'intro.js';
Then called it in componentDidMount
componentDidMount() {
introJs().start();
}
Element where I am using it at:
<div className={cx('dropDownSortingBlock')}>
{!isTrending && <div className={cx('dropDown')} data-intro={'Hello step one!'}>
However when i import css into a parent component
It doesn't render the component.
Update:
I tried using intro.js react wrapper and i have imported css directly into my file now.
However it just doesn't work
constructor() {
super();
this.state = {
showMessage: false,
type: '',
message: '',
stepsEnabled: true,
initialStep: 0,
steps: [
{
element: '.snapshotWrapper',
intro: 'Hello step',
},
{
element: '.snapshotWrapperNew',
intro: 'Hello Sort wrapper',
},
],
};
}
In render
<Steps
enabled={this.state.stepsEnabled}
steps={this.state.steps}
initialStep={this.state.initialStep}
onExit={this.onExit}
/>
Below is what shows up:
Because you're importing the css file from the package in node_modules , Add the ~ to your import in ListLandingPage.css :
#import "~intro.js/introjs.css";
see Import CSS from "node_modules" in Webpack
Or, import it in your component ( without the ~ ) :
import introJs from 'intro.js';
import 'intro.js/introjs.css';
Howerver, I would suggest you use the React wrapper around Intro.js for a React app.
they even have a code sandbox to get started
Please use react wrapper for intro.js.
npm install intro.js-react
also install intro js -- > npm install intro.js --save
then you can import css files from node modules like this below
import "intro.js/introjs.css"
themes are also available on the themes folder.(for eg: import "intro.js/themes/introjs-
nassim.css";)
Wrapper works similarly. Define steps / hints inside component. for that :-
import { Steps, Hints } from "intro.js-react";
Did you try https://www.npmjs.com/package/intro.js-react . It is a small React wrapper around Intro.js. The wrapper provides support for both steps and hints