Now I am working on a Nuxt project. Currently, there are many useful packages that make vue more enjoyable to use. But I've managed to find Nuxt packages. So I am wondering if there is any good way to use Vue packages in Nuxt projects. For example, vue has good packages related to google map including vue-google-maps. It would be great if I can use it in Nuxt.
vue-google-maps documentation has an example of how to add the package as a nuxt plugin. Add a js file (eg, google-maps.js) in your /plugins directory:
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
// your config here
}
And then, in your nuxt.config.js:
plugins: [
{ src: '~/plugins/google-maps' },
],
Most Vue packages should work just fine in Nuxt after these steps.
Related
Current
I have two repositories:
Main Web App - simple nuxt3 web app
Component Library - simple vite/vue app
Goal
Build my own component library using vite, vue3 and tailwindcss
Problem
When I use npm run dev I can se my components working fine (from the vite app) but when I build my library npm run build:watch and import them in another project (nuxt app) tailwind classes/styles are not working
This is mi vite app (all good)
This is the nuxt app where I imported the component (no style)
Repositories:
Main Web App: https://github.com/fro-systems/clau-web
Component Library: https://github.com/fro-systems/clau-components
Adding this to package.json on the vite-libray
"exports": {
"./dist/style.css": "./dist/style.css"
},
And addin this nuxt.config.ts
css: [
"clau-components/dist/style.css"
],
The issues was that I wasn't adding the styles
I am building a Vue3 npm component library with hopes that I could access the current router with vue-router's useRouter, and it would be automatically provided by whatever vue app is importing my library components.
If my library components are referenced directly import myCompThatUsesRouter from '../../myCompThatUsesRouter.vue the router works.
If I reference the same component via the node_module package import myCompThatUsesRouter from '#myPackage' router is undefined.
I also get a vue warning
injection "Symbol()" not found.
Is this not how these inject methods are intended to work?
The issue was that my library defined vue-router as a "dependency", not a "peerDependency".
https://nodejs.org/es/blog/npm/peer-dependencies/
Also my vite config needed to define vue-router as "external"
vite.config.ts
rollupOption: {
external: ['vue', 'vue-touer']
}
I am not familiar with packing frontend projects. When I was writing frontend, we just used JQuery. So the problem is now I have a project created by vue-cli and packed by webpack.
But as I don't want to load libraries from my local server but from remote CDN. How should I change the yarn add dependencies into CDN based form during yarn build? What is the correct way to do this kind of packing?
I've searched a lot but cannot find a good solution, some may suggest adding all CDN in the head section. But that's difficult to manage.
1. update your public/index.html adding the vue script source for the cdn (preferably in the head)
<script src="https://cdn.jsdelivr.net/npm/vue#2.6"></script>
2. create a vue.config.js file in the project root with the following configuration. (if you already have the file, add configureWebpack block to it)
module.exports = {
configureWebpack: {
externals: {
Vue: "vue"
}
}
};
this will flag the Vue dependency as a global, and not add it into the vendor bundle. You can do the same with other dependencies like element-ui, vuetify, vuex, etc...
Can i use bootstrap in a vue project along side sass. Is there any way to use bootstrap classes with pug.
I have tried to install bootstrap using this tutorial:https://travishorn.com/adding-bootstrap-to-a-vue-cli-project-98c2a30e0ed0
when i add the following commands in main.js file.
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
It is giving me:
No PostCSS Config found in: /home/sidra/gekko/node_modules/bootstrap/dist/css
at /home/sidra/gekko/web/vue/node_modules/postcss-load-config/index.js:51:26
I think I might be late with my answer, but I will answer, anyway, because I had the same issue today.
The idea is that package.json is storing your PostCSS configuration. So, you need to at least add PostCSS options key if it wasn't set yet:
"postcss": {
"options": {},
"plugins": {
"autoprefixer": {}
}
}
UPD: by the way, I think this type of error appears with external CSS only and pug might not be related.
I've build a Vue JS 2.x plugin using the vue create <my-plugin-name> and the vue-cli-plugin-p11n plugin. I have a directory structure that consists of a dist/ directory with a few compiled JS files and a main src/ folder containing my components.
I'd like to use these components within Nuxt JS 2.4.x.
I've created a plugins/LesForm.js plugin, and have added '#/plugins/LesForm' to my array of plugins within nuxt.config.js.
My plugin file consists of:
import Vue from 'vue'
import LesForm from 'LesForm'
Vue.use(LesForm)
I'm then trying to import the plugin with it's component into a page by doing: <LesForm></LesForm> within my page.
I initially get the error of:
Failed to mount component: template or render function not defined., but adding the following to my script tag of a page seems to remove that error, but this doesn't seem right?
<script>
import LesForm from 'LesForm'
export default {
components: {
LesForm
}
}
</script>
without this, my page breaks, and adding it I get: Failed to mount component: template or render function not defined. as an error with no sign of my Vue plugin that I've made with some markup.
I'm using the Vue Cli service to build my plugin via NPM.
Attached is a screenshot of my plugin directory structure: