I would like to use preinstalled node components in Vuepress (if possible).
Let's say for example I like the following open source framework:
link
And I install it in my Vuepress project
npx create-vuepress-site
cd docs
npm install
npm run dev
npm install #telekom/scale-components#next
Further I add in my config.js the following code in order to use the components:
head: [
['link', { rel: 'stylesheet', href: './node_modules/#telekom/scale-components/dist/scale-components/scale-components.css' }],
['script', { type: 'module', src: './node_modules/#telekom/scale-components/dist/scale-components/scale-components.esm.js' }]
],
I would now assume that I could simply use the components, e.g.
<div>
<scale-button>Click!</scale-button>
</div>
Unfortunately through, it just returns plain text.
Is there a step in between that I am missing?
Related
I'm trying to migrate big project, about 2000 components and I have a lot of packages that not relevant in Vue3, 'Element-UI' for instace.
After upgrade Vue to version 3.1.0-0 and add #vue/compat version 3.1.0-0 and #vue/compiler-sfc version 3.1.0-0, I fix all errors and trying to 'npm run dev', than I saw this error
In addition, I have update vue-loader to version 16.0.0 and changed main.js to this:
My package.json:
How can I solve this issue?
This question ranks high in google, so I would add a settings for Vue 3. With Webpack 5 and Vue 3, the webpack config alias changes to this:
resolve: {
extensions: [ '.tsx', '.ts', '.js', '.vue' ],
alias: {
'vue': '#vue/runtime-dom'
}
},
Alternatively this may be the solution, if the are transpilation errors:
alias: {
'Vue': 'vue/dist/vue.esm-bundler.js',
}
I am using Nuxt, Vuetify and Storyblok. I have problem when I want to display markdown from storyblok. I try to use Markdownit modul.
First I install it with npm, then import to modules and use it with v-html, but still don't get expected results.
What I am doing wrong?
npm install markdown-it --save
modules: [
['#nuxtjs/markdownit', {
html: true,
linkify: true,
breaks: true,
}],
['storyblok-nuxt', {
accessToken: process.env.NODE_ENV == "production" ? "ygL5rmck1lGa42Vaai7x1Qtt" : 'iyPj3vEKmPladyz3zeqKuwtt',
cacheProvider: 'memory'
}]
],
<p v-html="content"></p>
Result
**Bold text**
You need to actually use the module, too. You're just importing it at the moment.
What I mean is to write
<p v-html="$md.render(content)"></p>
instead of
<p v-html="content"></p>
I am facing some issue loading 3rd party script and stylesheets in Vuepress. It's not showing error after adding it to head section of the front matter but I'm not able to access any of the UIkit class or make http calls. Newbie to Vue and Vuepress. Am I missing something?
head: [
['link', { rel: 'stylesheet', href: `https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/css/uikit.min.css` }],
['script',{ src: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/js/uikit.min.js' }],
['script',{ src: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/js/uikit-icons.min.js' }],
['script',{ src: 'https://cdn.jsdelivr.net/npm/vue-resource#1.5.1' }]
],
You just have to re-run the build command:
npm run docs:dev
I am trying to integrate the material design from https://mdbootstrap.com/vue/ into my NuxtJS project but i failed to find any indication on how to add that to nuxt.
For bootstrap-vue, I added it into my nuxt.config.js as it follows :
modules: [
'bootstrap-vue/nuxt',
],
but it doesn't seem to work for mdbootstrap.
If you have a nuxt project standing, all you need to do is
yarn add mdbvue bootstrap-css-only
OR
npm install mdbvue bootstrap-css-only
...then edit your nuxt.config.js, so it adds necessary styles and transpiles the library's ES6:
css: [
'bootstrap-css-only/css/bootstrap.min.css',
'mdbvue/build/css/mdb.css'
]
...
build: {
extend(config, ctx) {},
transpile: [
'mdbvue'
]
}
and voilà! Checkout out the official guide for some extra details and start using MDB with Nuxt today!
Best
What is the correct way to import ractive and ractive-load to my rollup project? npm or github?
Currently I am using npm to install each one:
npm install --save-dev ractivejs/ractive
And
npm install --save-dev ractivejs/ractive-load
And I'm using rollup-plugin-commonjs with rollup-plugin-node-resolve to corretly bundle them (rollup.config.js in the end of the question):
import Ractive from 'ractive';
import load from 'ractive-load';
...
But it seems that ractive-load also imports other modules in its code, causing this error:
Error parsing /home/.../node_modules/rcu/src/make.js: 'import' and 'export' may only appear at the top level (2:0) in /home/.../node_modules/rcu/src/make.js
How can I correctly use Rollup and which are the right sources for this case (npm or github)?
Here is my rollup.config.js:
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
export default {
entry: 'src/main.js',
plugins: [
nodeResolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs({
sourceMap: false
}),
// uglify()
],
format: 'iife',
moduleName: 'Altiva',
dest: 'altiva.js'
};
ractive-load is intended to "read" link tags in the browser and then do AJAX requests for the component file, then it uses a library called rcu to convert the component files into usable javascript components.
What you need is a utility (that uses rcu or does equivalent work) to turn your component files into javascript files that you can run during build process then hand-off to rollup. Fortunately, it looks like there is a rollup plugin rollup-plugin-ractive designed to do just that:
rollup({
entry: 'src/main.js',
plugins: [
ractive({
// By default, all .html files are compiled
extensions: [ '.html', '.ract' ],
// You can restrict which files are compiled
// using `include` and `exclude`
include: 'src/components/**.html'
})
]
}).then(...)
There's also list of some of the available loaders here, among them are "plain vanilla js" variants as well.