You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Nov 30, 2020. It is now read-only.
Describe the bug
First of all I'm using Vue.js with Nuxt.js and want to import <m-text-field> & <m-select> into my component. To use Vue-Components in Nuxt you need to import them as plugins. In the description of this repository is written, that these components support SSR - but it's only possible to import the plugins on the client (but that's not the main thing). In the @material library underscores are missing on mixins, variables and functions SCSS import paths.
However, if I add a <m-text-field> Component, only a few styles like the class .mdc-text-field are applied. The major part of the styling is not applied, even though the import paths should work and all styles should be available. Also i want it outlined - that way it is even more surprising how the result looks.
To Reproduce
Steps to reproduce the behavior:
Create Nuxt.js Application in Universial mode
Install npm-packages as mentioned in the documentation
Create Nuxt.js plugin ~/plugins/textfield.js with following code:
import Vue from 'vue'
import TextField from 'material-components-vue/dist/text-field'
Vue.use(TextField)
Do that for all Elements used on your page
4. Add plugins in nuxt.config.js or in component
Expected behavior
I expected a fully styled outlined TextField like on the screenshots from your docu.
Screenshots from Docu .
Actual behavior
Only a few styles got applied. Even the border is from the user agent stylesheet. No error messages occured. All paths, filenames and other imports and inclulde should work..
Screenshots from actual implementation on page
Desktop (please complete the following information):
OS: Win 10
Browser Chrome
Version 79
The text was updated successfully, but these errors were encountered:
Describe the bug
First of all I'm using Vue.js with Nuxt.js and want to import
<m-text-field>
&<m-select>
into my component. To use Vue-Components in Nuxt you need to import them as plugins. In the description of this repository is written, that these components support SSR - but it's only possible to import the plugins on the client (but that's not the main thing). In the@material
library underscores are missing on mixins, variables and functions SCSS import paths.However, if I add a
<m-text-field>
Component, only a few styles like the class.mdc-text-field
are applied. The major part of the styling is not applied, even though the import paths should work and all styles should be available. Also i want it outlined - that way it is even more surprising how the result looks.To Reproduce
Steps to reproduce the behavior:
~/plugins/textfield.js
with following code:Do that for all Elements used on your page
4. Add plugins in
nuxt.config.js
or in component<client-only>
tag excludes elements from SSR):Expected behavior
I expected a fully styled outlined TextField like on the screenshots from your docu.
Screenshots from Docu
![image](https://user-images.githubusercontent.com/42216397/73015603-a1a25c00-3e1c-11ea-8a9b-ae227f2baca2.png)
.
Actual behavior
Only a few styles got applied. Even the border is from the user agent stylesheet. No error messages occured. All paths, filenames and other imports and inclulde should work..
Screenshots from actual implementation on page
![image](https://user-images.githubusercontent.com/42216397/73024054-0fef1a80-3e2d-11ea-8461-2b029ebd1334.png)
![image](https://user-images.githubusercontent.com/42216397/73024073-1aa9af80-3e2d-11ea-9b91-7f5ff4d4a201.png)
Desktop (please complete the following information):
The text was updated successfully, but these errors were encountered: