I want to use tailwind typeahead vue plugin in nuxt. i have added the package using npm install vue-tailwindcss-typeahead .
then i created a file in plugins folder. tailwind-typeahead.js with following code
import Vue from 'vue'
import VueTailwindcssTypeahead from 'vue-tailwindcsscss-typeahead'
Vue.use(VueTailwindcssTypeahead)
and included the plugin file in nuxt.config.js
{ src: './plugins/tailwind-typeahead.js' }
But i am getting this error
This dependency was not found: friendly-errors 01:44:37
friendly-errors 01:44:37
* vue-tailwindcsscss-typeahead in ./plugins/tailwind-typeahead.js friendly-errors 01:44:37
friendly-errors 01:44:37
To install it, you can run: npm install --save vue-tailwindcsscss-typeahead
for reference here is the link of package
https://github.com/basarozcan/vue-tailwindcss-typeahead
You do have a typo in your plugin: vue-tailwindcsscss-typeahead.
You probably meant to write vue-tailwindcss-typeahead .
The rest is fine and it's the way to go if you want your code to be globally available in your Nuxt app. If you only want it local, import it in the component itself.
Related
I am using vue.js 2 - I add some mdi-icons in my App.vue this generate a new error in my project
When I was trying to serve my Project but I got the error as it given as below
I apply also some commands on it but it not solved my error.
Can anyone help me to solve it
Make sure to have the .css extension, otherwise the import will fail.
As a reminder:
Install #fortawesome/fontawesome-free (with npm or yarn depending on what package manager your project uses).
Then in your main.js you can just import all.css as per the example below
import Vue from 'vue'
import App from './App.vue'
import '#fortawesome/fontawesome-free/css/all.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
This will allow you to use the fa classes in regular HTML tags.
I also recommend taking a look at the Vue supported library for FontAwesome here if you want to have more granularity with your imports.
https://github.com/FortAwesome/vue-fontawesome
If you are using yarn then put this command
yarn add #fortawesome/fontawesome-free
or
If you are using npm then put this command
npm install #fortawesome/fontawesome-free
and add
#import '#fortawesome/fontawesome-free/css/all.css'; this in app.scss file
or add import '#fortawesome/fontawesome-free/css/all.css'; in app.js file
I simply solve the error by uninstall the googlefonts then again reinstall the google fonts by using following command.In my case I am using yarn so I use
yarn add #fortawesome/fontawesome-free
But in case of user that are using npm they should use following command
npm install --save #fortawesome/fontawesome-free
Also the following link is helpful google solve links for Npm and Yarn
: https://www.google.com/search?q=font%20awesome%20add%20by%20yaRN&oq=font%20awesome%20add%20by%20yaRN&aqs=chrome..69i57j33i10i160.11903j0j7&sourceid=chrome&ie=UTF-8
This one worked for me, I Downgraded #fortawesome/fontawesome-free version to ^5.15.4 in the package.json
I am creating a stencil project which uses an npm package inside it, is there any options to add an npm package inside stencil project. Any suggestions I searching for a solution for quite a while.
This is how i use ck-editor in angular
<ck-editor name="editor" #myEditor [(ngModel)]="templateSetValue.template_content"
(change)="handleEditorData($event)">
</ck-editor>
Is it possible to use the same is stencil project
https://www.npmjs.com/package/ngx-ckeditor
Not sure if I understood the question correctly, but to add a package from npm in your Stencil.js project, you can just install it, like you would in any other node project:
npm install <some-package>
For example nprogress:
npm install nprogress #types/nprogress
and then import it in your code like
import nprogress from 'nprogress';
nprogress.start();
// ...
I am trying to add tailwind to vue project, in order to do this I am following the next steps:
Version of vue
vue --version
#vue/cli 4.3.1
Create project
vue create tailwindproject
(node-sass, babel, router, eslint, with dedicated files)
Install tailwind
npm install tailwindcss
Create css file on:
touch ./src/styles/tailwind.scss
Copy the following content on ./src/assets/styles/tailwind.scss
#tailwind base;
#tailwind components;
#tailwind utilities;
Add the following line into main.js
import './assets/styles/tailwind.scss'
Execute
npm run serve
And appears the following message
Failed to resolve loader: sass-loader You may need to install it.
Install sass-loader with
npm install --save sass-loader
And appear the following error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Cannot find module 'sass'
I solved this with:
npm install --save-dev node-sass
Run server again, but the view looks without tailwind css.
are there any way of install correctly tailwind with sass and vue4?
Thanks
You need to pass the compiled css file through postcss. TailwindCSS is a postcss plugin, Sass cannot do anything with it. I think you should check the docs again.
Basically create a postcss.config.js file with this:
module.exports = {
plugins: [
require('tailwindcss'),
]
}
Then import your tailwind.css file in Vue.
Alternatively you can use tailwind cli npx tailwindcss init to setup tailwind.
I'm quite new in Vue and maybe my issue is trivial.
What I have to do:
I want to create a Vue component that I can put in a NPM private repo and import it into other projects with a sth like bundle.js file
TLDR:
can't import vue component building by vue-cli-service build --target lib/wc. Importing component I have sth silimar to "export 'HelloWorld' was not found in '../node_modules/hello-world'
long version:
I have asked questions and projects as much as I could. All projects are built by vue-cli without any additional changes.
create new default project vue create hello-world
by default we havefirst component here - src/component/HelloWorld, and for this example this is component which we want to export
using vue-cli-service try to make exportable file.
3a. vue-cli-service build --target lib --name vue-test ./src/components/index.js where index.js is
import Vue from 'vue';
import HelloWorld from './HelloWorld.vue';
const Components = {
HelloWorld,
};
Object.keys(Components).forEach((name) => {
Vue.component(name, Components[name]);
});
export default Components;
3b. or directly vue file vue-cli-service build --target wc --name vue-test 'src/components/HelloWorld.vue'
in both scenarios vue-cli-service generates me file in to /dist folder and I want to believe this file are correct
in both scenarios I can't import this component to another vue project using import {HelloWorld} from 'path/to/folder/or/file'; or require('path/to/folder/or/file'). It seems like bundle files haven't exported member.
what I doing wrong? Should use build --target wc or build --target lib?
If You don't want to create new app to reproduce this issue U can download repo from https://github.com/okosowski/vueTest (project started using vue cli).
git clone
npm install
npm run build-bundle-lib or npm run build-bundle-lib
npm link or simply copy file to exiting vue project
try to import/display HelloWorld
I will be grateful for any help!!!
thanks
node v10.14.2
npm 6.4.1
vue-Cli 2.9.6 (the same on 3.3.0)
other used version in https://github.com/okosowski/vueTest/blob/master/package.json
I was facing the same exact problem while using vue-cli to build and test my Vue component. Fortunately I was able to find the solution after reporting it as a bug to vue-cli issue tracker on GitHub. Turned out there was nothing wrong with the common.js file nor was it a bug.
Anyway... long story short, the existing project you are trying to import into is unable to resolve symlinks (because this is what happens when you use npm link). In order to solve your problem, you need to add the following into vue.config.js in the root folder of the project you are importing into:
// vue.config.js
module.exports = {
chainWebpack: config => config.resolve.set('symlinks', false)
}
Hope this helps. For more info, check out these links:
My issue report in the vue-cli tracker
Webpack configuration: resolve.symlinks
What is the proper way to import VueJs into my javascript file using NPM? I am getting a Vue is not defined error.
First, install the package:
$ npm install vue
And then import it in whatever file you want to use Vue:
import Vue from 'vue'