I'm currently trying to use a custom component (https://github.com/wolfika/vue-playing-card) in my demo application built with Vue CLI.
First I've tried in a JS Fiddle (https://jsfiddle.net/xwb59m8g/1/) and everything works as expected just by importing the <script> (as explained in the Github "Browser" section) and using the <vue-playing-card> custom component. Than I've tried including the component in my Vue CLI app by following the instruction on the Github page under the "Bundler (Webpack, Rollup)" section and everything works.
My problem is that, for some reasons that I will explain if you need to know, I have to include this component using the <script> tag, as in the JS Fiddle, and not with the "Bundler (Webpack, Rollup)".
I tried including the <script> tag at the bottom of my index.html file but when I try to include the custom component in my Vue application this error gets printed in the console:
Unknown custom element: - did you register the component correctly? etc.
I really don't understand what it's happening since in the JS Fiddle everthing works as expected... can you help me? Thanks in advance and sorry if this is a stupid question, but I've tried and searched all I could.
Related
I am trying to use #nuxtjs/storybook inside a Vue Storefront Next (https://docs.vuestorefront.io/v2/general/key-concepts.html) project.
I can get Storybook to open and to show stories, but the component within the stories are not rendered. For example, if I try and use the example from https://storybook.nuxtjs.org/usage then I see a <link> element in devtools (the name of the Vue component), not a rendered <a> element (the content of the Vue component):
I then switched to trying to use another simple component:
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.vue
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.stories.js
But that doesn't work either, you can see an example of that here: https://pedantic-chandrasekhar-a83cfc.netlify.app/?path=/story/logo--logo (I had trouble getting Storybook to work on Codesandbox).
Vue Storefront Next is based on Nuxt but I had to make a few changes to get Storybook to open:
Update the build section within nuxt.config.js:
babel: {
presets({ envName }) {
return [
[
'#nuxt/babel-preset-app',
{
corejs: { version: 3 }
}
]
]
},
ignore: [/[\/\\]core-js/, /#babel[\/\\]runtime/],
},
install #babel/runtime-corejs3, core-js 3, and ts-node
ts-node was necessary because Vue Storefront Next provides a tsconfig.json file for development of part of the project, and that makes #nuxtjs/storybook module think the project is a Typescript project (https://github.com/nuxt-community/storybook/blob/e5b3698482873d7129cd763a0422b8c3151cee0b/src/index.ts#L67-L76), but the Vue Storefront project does not use #nuxt/typescript-runtime - I am wondering if this is part of the problem?
You can see the package.json content on Codesandbox: https://codesandbox.io/s/admiring-pine-2byq7?file=/package.json
Any clues as to how to fix this issue would be SUPER appreciated, thank you! I've spent the best part of a day on this but I don't know enough about Storybook or Nuxt to be able to debug it myself, unfortunately :(
It turns out that the #nuxtjs/storybook module seems to be dependent on components: true being set in the project's nuxt.config.js file.
This isn't mentioned anywhere in the #nuxtjs/storybook documentation, but I've raised a Github issue to point this out and will raise a PR against the docs if the maintainer agrees.
You can see my thought process behind how I discovered this issue in this Github thread: https://github.com/nuxt-community/storybook/issues/233#issuecomment-785027558
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
What I'm using
VSCode
Quasar (Vue)
Typescript
Eslint/#typescript-eslint
Prettier / prettierhtml / Vetur
Current issue:
Until recently, injected script in the <template> of vue files (e.g. onSignIn in <div #click="onSignIn"> was checked against available variables/methods in the <script lang="ts"> part. This has now stopped working and I couldn't figure out what's the reason. Playing around with VSCode/Vetur/eslint settings wasn't successful either so far.
As the above hasn't worked earlier either but just since I started my latest project, I'm not sure what settings is responsible for that part anyway (Veturs' HTML > Validate > Scripts apparently is not enough) and my first question is, whether it works for you; the second, if you know exactly why/why not (?).
Setting vetur.experimental.templateInterpolationService: true did the trick.
I set up a new vue-project that was created using vue ui and manually selecting the features.
The features are the following:
Babel
Router
Vuex
Use config files
and only that, and run the project using the development mode; however, an error occur in the console (Dev tools) showing an unknown elements for router-link and router-view.
https://github.com/JeromeDeLeon/vue-router-bug
That is the repo (a newly created one like hello world program). I already posted an issue on vue-router github page but eventually got closed because they said that everything was working properly, but it is not working for me.
I tried changing the Router to VueRouter on router.js, but the result is still the same.
I tried transferring the code of router.js to main.js, but still not working.
The expected result is to show the content of Home.vue in order to check if router is working.
The actual result shows the "Home | About" only in the top-middle of the browser and nothing else.
I am trying to download Vue Element.io locally. If I am using example from CDN all works. But if I am linking to component placed on file system I am getting error.
<script src="js/index.js"></script>
Instead of:
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
I am getting error:
Unknown custom element: <el-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I tried to link with all package and part of it (single element like button). Thу error is same.