I saw this tutorial.
So I tried adding the mdbvue depedency to my project and added an empty contiainer:
App.vue
<template>
<div :class="$style.App">
<DropdownMenu />
...
<script>
import DropdownMenu from './components/DropdownMenu.vue'
...
./components/DropdownMenu
<template>
<container>
</container>
</template>
<script>
import { Container } from 'mdbvue';
</script>
package.json
...
"dependencies": {
"@babel/helper-module-imports": "v7.0.0-beta.51",
"mdbvue": "4.*.*",
"vue": "2.*.*",
"vue-router": "3.*.*"
},
...
"devDependencies": {
"@neutrinojs/vue": "8.*.*",
"babel-plugin-transform-runtime": "6.*.*",
"babel-preset-stage-2": "6.*.*",
"jquery": "3.*.*",
"neutrino": "8.*.*",
"webpack": "3.*.*"
}
...
This results into an error saying it canât find babel-plugin-transform-runtime
.
Adding that and babel-preset-stage-2
to devDependencies
and I still recieve an errorlike warning:
WARNING in ./src/components/DropdownMenu.vue
16:35-49 "export 'default' (imported as '__vue_script__') was not found in '!!../../node_modules/babel-loader/lib/index.js?{"cacheDirectory":true,"plugins":[["/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/fast-async/plugin.js",{"spec":true}],"/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js"],"presets":[["/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/babel-preset-env/lib/index.js",{"debug":false,"modules":false,"useBuiltIns":true,"exclude":["transform-regenerator","transform-async-to-generator"],"targets":{"browsers":["last 2 Chrome versions","last 2 Firefox versions","last 2 Edge versions","last 2 Opera versions","last 2 Safari versions","last 2 iOS versions"]}}]]}!../../node_modules/vue-loader/lib/selector?type=script&index=0!./DropdownMenu.vue'
at HarmonyImportSpecifierDependency._getErrors (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:65:15)
at HarmonyImportSpecifierDependency.getWarnings (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:39:15)
at Compilation.reportDependencyErrorsAndWarnings (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/Compilation.js:702:24)
at Compilation.finish (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/Compilation.js:565:9)
at applyPluginsParallel.err (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/Compiler.js:502:17)
at /home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/tapable/lib/Tapable.js:289:11
at _addModuleChain (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/Compilation.js:511:11)
at processModuleDependencies.err (/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/webpack/lib/Compilation.js:481:14)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
@ ./src/components/DropdownMenu.vue
@ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"plugins":[["/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/fast-async/plugin.js",{"spec":true}],"/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js"],"presets":[["/home/folatt/Cloud/workspace/atom/Sites/YropeĂȘn/node_modules/babel-preset-env/lib/index.js",{"debug":false,"modules":false,"useBuiltIns":true,"exclude":["transform-regenerator","transform-async-to-generator"],"targets":{"browsers":["last 2 Chrome versions","last 2 Firefox versions","last 2 Edge versions","last 2 Opera versions","last 2 Safari versions","last 2 iOS versions"]}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:5000 (webpack)/hot/dev-server.js ./src/index
I get the feeling that this is not the right way to go.
What is?